Question

我想创建一个自定义元素，该元素可以承载以下任何HTML标记：

<my-custom-element>
  <p>This is some message.</p>
  <div><button>Click here</button></div>
</my-custom-element>

以上标记似乎无效。每个浏览器都将其呈现为：

<my-custom-element></my-custom-element>
  <p>This is some message.</p>
  <div><button>Click here</button></div>

如何让自定义元素在标记中包含子元素？

Answer 1

如果您使用的是shadowDOM，则需要在自己的shadowDOM中添加一个<slot>。

class MyElement extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({mode: 'open'}).innerHTML = '<style>:host{border:1px dashed red;display:inline-block;}</style><slot></slot>';
  }
}

customElements.define('my-element', MyElement);

<my-element>
  <p>This is some message.</p>
  <div><button>Click here</button></div>
</my-element>

如何在HTML标记的自定义元素中添加子元素？

1 个答案: