| <!DOCTYPE html> |
| <html> |
| <head> |
| <script src="resources/shadow-dom.js"></script> |
| </head> |
| <body> |
| <div id="sandbox"></div> |
| <script> |
| var shadowStyle1 = document.createElement('style'); |
| shadowStyle1.innerHTML = '*::-webkit-distributed(div) { color: green; }'; |
| |
| var shadowStyle2 = document.createElement('style'); |
| shadowStyle2.innerHTML = 'content::-webkit-distributed(*) { color: red; }'; |
| |
| var shadowStyle3 = document.createElement('style'); |
| shadowStyle3.innerHTML = '*::-webkit-distributed(*) { color: blue; }'; |
| |
| var sandbox = document.getElementById('sandbox'); |
| sandbox.appendChild( |
| createDOM('div', {}, |
| createShadowRoot( |
| shadowStyle1, |
| createDOM('div', {}, |
| document.createTextNode('normal')), |
| createDOM('content')), |
| createDOM('div', {}, |
| document.createTextNode('green')))); |
| |
| sandbox.appendChild( |
| createDOM('div', {}, |
| createShadowRoot( |
| shadowStyle2, |
| createDOM('div', {}, |
| document.createTextNode('normal')), |
| createDOM('content')), |
| createDOM('div', {}, |
| document.createTextNode('red')))); |
| sandbox.appendChild( |
| createDOM('div', {}, |
| createShadowRoot( |
| shadowStyle3, |
| createDOM('div', {}, |
| document.createTextNode('normal')), |
| createDOM('content')), |
| createDOM('div', {}, |
| document.createTextNode('blue')))); |
| </script> |
| </body> |
| </html> |
