问题描述
例如,我希望能够用HTML编写此代码:
<my-container>
Some text.
</my-container>
JS:
class MyContainer extends HTMLElement {
constructor() {
super()
const shadow = this.attachShadow({mode: 'open'})
const p = document.createElement('p')
shadow.appendChild(p)
}
}
customElements.define('my-container',MyContainer)
我最终得到的结果(虽然并不意外):
<my-container>
<p></p>
Some text.
</my-container>
我想要什么:
<my-container>
<p>Some text.</p>
</my-container>
解决方法
带有shadowDOM 的自定义元素中的HTML保留在 lightDOM
中(不可见)您可以自己移动它:
<my-element>
Hello World,I came from lightDOM
</my-element>
<script>
customElements.define("my-element",class extends HTMLElement {
constructor() {
super().attachShadow({
mode: 'open'
}); // sets and returns thi.shadowRoot for free
this.wrapper = this.shadowRoot.appendChild(document.createElement('H1'));
this.wrapper.innerHTML = "please click me";
}
connectedCallback() {
this.onclick = () => this.wrapper.innerHTML = this.innerHTML;
}
});
</script>
或者您使用shadowDOM插槽
<style>
my-element{
color:green;
}
</style>
<my-element>
Hello World,I am REFLECTED from lightDOM
</my-element>
<script>
customElements.define("my-element",class extends HTMLElement {
constructor() {
super().attachShadow({
mode: 'open'
}); // sets and returns thi.shadowRoot for free
this.wrapper = this.shadowRoot.appendChild(document.createElement('H1'));
this.wrapper.innerHTML = "<slot></slot";
}
connectedCallback() {
}
});
</script>
请注意内容的样式!
text / html 保留 in lightDOM,它被反射 IN shadowDOM
请阅读:::slotted CSS selector for nested children in shadowDOM slot