According the Shadow DOM specification (https://dvcs.w3.org/hg/webcomponents/raw-file/tip/spec/shadow/index.html#styles) "the styles of the shadow insertion point node are inherited by the child nodes of the shadow root of the shadow tree, distributed to this shadow insertion point". But it doesn't work in Chrome 23.0.1271.91 m. Example <html> <head> <script type="text/javascript"> function test() { var SR = window.ShadowRoot || window.WebKitShadowRoot; var d = document; var host = d.createElement('div'); d.body.appendChild(host); //Old tree var s1 = new SR(host); var div1 = d.createElement('div'); div1.innerHTML = '<span id="shd1">This is an old shadow tree</span>'; s1.appendChild(div1); //younger tree var s2 = new SR(host); var div2 = d.createElement('div'); div2.innerHTML = '<shadow style="color:red"></shadow>'; s2.appendChild(div2); } </script> </head> <body onload="test()"> </body> </html> Red color style is not applied to the tree nodes assigned to the shadow insertion point
This looks obsolete.