| <!DOCTYPE html> |
| <script src="../fast/dom/shadow/resources/shadow-dom.js"></script> |
| <div id="sandbox"></div> |
| <script> |
| var shadowStyle = document.createElement('style'); |
| shadowStyle.innerHTML = '::slotted(div) { color: green; }' |
| + '::slotted(div.blue) { color: blue; }' |
| + 'slot::slotted(div#red) { color: red; }' |
| + 'slot::slotted(div[data-color=purple]) { color: purple; }'; |
| |
| var sandbox = document.getElementById('sandbox'); |
| sandbox.appendChild( |
| createDOM('div', {}, |
| attachShadow( |
| {'mode': 'open'}, |
| shadowStyle, |
| createDOM('slot')), |
| createDOM('div', {}, |
| document.createTextNode('green')), |
| createDOM('div', {class: 'blue'}, |
| document.createTextNode('blue')), |
| createDOM('div', {id: 'red'}, |
| document.createTextNode('red')), |
| createDOM('div', {'data-color': 'purple'}, |
| document.createTextNode('purple')))); |
| </script> |
