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