Web 组件和影子根
Web component and shadow root
我在使用模板的地方用这段代码创建了一个网络组件:
let tmpl = document.createElement('template');
tmpl.innerHTML =`<style>
div {
color: green;
display: inline;
margin: 3px;
}
p {
border: 1px solid black;
}
</style>
<p>
Hello my name is:
<div>Web</div>
<div>Component</div>
</p>`;
this.shadowRoot.appendChild(tmpl.content.cloneNode(true));
但是在控制台的 shadow root 中我看到这个内容不一样:
它与阴影 DOM 或自定义元素无关。
实际上,正常的 DOM 会发生相同的行为:您不能在 <p>
元素中插入 <div>
元素。后者只接受短语内容.
参见问题:Why <p>
tag can't contain <div>
tag inside it?
我在使用模板的地方用这段代码创建了一个网络组件:
let tmpl = document.createElement('template');
tmpl.innerHTML =`<style>
div {
color: green;
display: inline;
margin: 3px;
}
p {
border: 1px solid black;
}
</style>
<p>
Hello my name is:
<div>Web</div>
<div>Component</div>
</p>`;
this.shadowRoot.appendChild(tmpl.content.cloneNode(true));
但是在控制台的 shadow root 中我看到这个内容不一样:
它与阴影 DOM 或自定义元素无关。
实际上,正常的 DOM 会发生相同的行为:您不能在 <p>
元素中插入 <div>
元素。后者只接受短语内容.
参见问题:Why <p>
tag can't contain <div>
tag inside it?