javascript - Child content inside custom element not being rendered -


the 'child content' span shows in light dom, isn't rendered page (see screenshot).

anyone know why it's not visible? note it's apparently not being slotted, attempt make visible.

<!doctype html> <html>   <body>     <hello-world>       <span>child content</span>     </hello-world>     <script>         var template = `           <span>hello world</span>           <slot></slot>         `;         var myelementproto = object.create(htmlelement.prototype);         // fires when instance of element created         myelementproto.createdcallback = function() {             var shadowroot = this.createshadowroot();             shadowroot.innerhtml = template;         };         document.registerelement('hello-world', { prototype: myelementproto });     </script>   </body> </html> 

screenshot of dom tree , page child not visible

p.s. in chrome 57.0.2987.133

it turns out createshadowroot deprecated. appears want , shows no error, doesn't support slotting (or apparently showing child elements).

swapping createshadowroot() attachshadow({mode: 'open'}) solved problem.


Comments