| <!DOCTYPE html> |
| <html> |
| <head> |
| <script src="resources/shadow-dom.js"></script> |
| </head> |
| <body> |
| <div id="sandbox"></div> |
| <script> |
| var shadowStyle = document.createElement('style'); |
| shadowStyle.innerHTML = 'content.non-exist::-webkit-distributed(div) { color: red; }' |
| + 'content.content-class::-webkit-distributed(div) { color: green; }' |
| + '#content-id::-webkit-distributed(div) { color: blue; }'; |
| |
| var sandbox = document.getElementById('sandbox'); |
| sandbox.appendChild( |
| createDOM('div', {'id': 'host'}, |
| createShadowRoot( |
| createDOM('content', {'select': '#host-child-1'}), |
| createDOM('content', {'class': 'content-class', 'select': '#host-child-2'}), |
| createDOM('content', {'id': 'content-id', 'select': '#host-child-3'}), |
| shadowStyle), |
| createDOM('div', {'id': 'host-child-1'}, |
| document.createTextNode('normal')), |
| createDOM('div', {'id': 'host-child-2'}, |
| document.createTextNode('green')), |
| createDOM('div', {'id': 'host-child-3'}, |
| document.createTextNode('blue')))); |
| </script> |
| </body> |
| </html> |
