我想创建一个能够在其中托管任何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>
如何在标记中包含自定义元素包含子元素?
如果你使用的是shadow DOM,那么你需要在shadowDOM中添加一个qazxsw poi。
<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);