Web 组件和影子根

Question

我在使用模板的地方用这段代码创建了一个网络组件：

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 中我看到这个内容不一样：

Answer 1

它与阴影 DOM 或自定义元素无关。

实际上，正常的 DOM 会发生相同的行为：您不能在 <p> 元素中插入 <div> 元素。后者只接受短语内容.

参见问题：Why <p> tag can't contain <div> tag inside it?

Web 组件和影子根

Web component and shadow root

web-component

shadow-dom

html5-template

native-web-component