OLD | NEW |
1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
2 <script src="resources/shadow-dom.js"></script> | 2 <script src="../fast/dom/shadow/resources/shadow-dom.js"></script> |
3 <div id="sandbox"></div> | 3 <div id="sandbox"></div> |
4 <script> | 4 <script> |
5 var shadowStyle = document.createElement('style'); | 5 var shadowStyle = document.createElement('style'); |
6 shadowStyle.innerHTML = '::slotted(div) { color: green; }' | 6 shadowStyle.innerHTML = '::slotted(div) { color: green; }' |
7 + '::slotted(div.blue) { color: blue; }' | 7 + '::slotted(div.blue) { color: blue; }' |
8 + 'slot::slotted(div#red) { color: red; }' | 8 + 'slot::slotted(div#red) { color: red; }' |
9 + 'slot::slotted(div[data-color=purple]) { color: purple
; }'; | 9 + 'slot::slotted(div[data-color=purple]) { color: purple
; }'; |
10 | 10 |
11 var sandbox = document.getElementById('sandbox'); | 11 var sandbox = document.getElementById('sandbox'); |
12 sandbox.appendChild( | 12 sandbox.appendChild( |
13 createDOM('div', {}, | 13 createDOM('div', {}, |
14 attachShadow( | 14 attachShadow( |
15 {'mode': 'open'}, | 15 {'mode': 'open'}, |
16 shadowStyle, | 16 shadowStyle, |
17 createDOM('slot')), | 17 createDOM('slot')), |
18 createDOM('div', {}, | 18 createDOM('div', {}, |
19 document.createTextNode('green')), | 19 document.createTextNode('green')), |
20 createDOM('div', {class: 'blue'}, | 20 createDOM('div', {class: 'blue'}, |
21 document.createTextNode('blue')), | 21 document.createTextNode('blue')), |
22 createDOM('div', {id: 'red'}, | 22 createDOM('div', {id: 'red'}, |
23 document.createTextNode('red')), | 23 document.createTextNode('red')), |
24 createDOM('div', {'data-color': 'purple'}, | 24 createDOM('div', {'data-color': 'purple'}, |
25 document.createTextNode('purple')))); | 25 document.createTextNode('purple')))); |
26 </script> | 26 </script> |
OLD | NEW |