El siguiente código no representa los elementos secundarios de CategoryElement, solo el elemento <p> dentro de Shadow Root. ¿Cómo hago que los hijos de CategoryElement se muestren?
<html> <head> </head> <body> <script> class CategoryElement extends HTMLElement { constructor() { super(); this.attachShadow({mode: 'open'}); this.header = document.createElement('p'); this.header.innerText = 'Shadow Header'; this.shadowRoot.append(this.header); } } customElements.define('category-element', CategoryElement); var elem = document.createElement('category-element'); document.body.appendChild(elem); var outer = document.createElement('p'); outer.innerText = 'Outer Header'; elem.appendChild(outer); </script> </body> <html>Creo que esto te lleva allí, pero no soy un experto en shadow dom ni mucho menos.
.shadowRoot como se muestra aquí:
elem.shadowRoot.appendChild(outer); Cuando inspecciono con las herramientas de desarrollo, puedo ver que ambos <p> están dentro del elemento shadow-root (si esa es la forma correcta de referirse a él).
</head> <body> <script> class CategoryElement extends HTMLElement { constructor() { super(); this.attachShadow({ mode: 'open' }); this.header = document.createElement('p'); this.header.innerText = 'Shadow Header'; this.shadowRoot.append(this.header); } } customElements.define('category-element', CategoryElement); var elem = document.createElement('category-element'); document.body.appendChild(elem); var outer = document.createElement('p'); outer.innerText = 'Outer Header'; elem.shadowRoot.appendChild(outer); </script> </body> <html>