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 = 'slot::slotted([data-color=red]) { color: red; }'; | 6 shadowStyle.innerHTML = 'slot::slotted([data-color=red]) { color: red; }'; |
7 | 7 |
8 var sandbox = document.getElementById('sandbox'); | 8 var sandbox = document.getElementById('sandbox'); |
9 sandbox.appendChild( | 9 sandbox.appendChild( |
10 createDOM('div', {}, | 10 createDOM('div', {}, |
11 attachShadow( | 11 attachShadow( |
12 {'mode': 'open'}, | 12 {'mode': 'open'}, |
13 shadowStyle, | 13 shadowStyle, |
14 createDOM('slot')), | 14 createDOM('slot')), |
15 createDOM('div', {}, | 15 createDOM('div', {}, |
16 document.createTextNode('normal')), | 16 document.createTextNode('normal')), |
17 // If the style is falsely shared with the <div> above, this won't
turn red. | 17 // If the style is falsely shared with the <div> above, this won't
turn red. |
18 createDOM('div', {'data-color': 'red'}, | 18 createDOM('div', {'data-color': 'red'}, |
19 document.createTextNode('red')))); | 19 document.createTextNode('red')))); |
20 </script> | 20 </script> |
OLD | NEW |