自定义 HTML 元素不呈现子元素

Question

以下代码不呈现 CategoryElement 的子元素 - 仅呈现阴影根中的 <p> 元素。 如何使 CategoryElement 的子元素呈现？

 <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>

Answer 1

我相信这会让你到达那里，但无论如何我都不是影子领域的专家。

我添加了.shadowRoot如下所示：

elem.shadowRoot.appendChild(outer);

当我使用开发工具进行检查时，我可以看到<p>都在 shadow-root 元素旁边（如果这是引用它的正确方法）。

 </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>

自定义 HTML 元素不呈现子元素

问题描述

1 个解决方案

解决方案1
1 2021-10-23 00:04:57

自定义 HTML 元素不呈现子元素

问题描述

1 个解决方案

解决方案1 1 2021-10-23 00:04:57

解决方案1
1 2021-10-23 00:04:57