web-component - Web 组件和影子根

Question

我使用以下代码创建了一个 Web 组件，其中我使用了模板：

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));

但是在控制台的影子根目录中，我看到了这个不一样的内容：

Answer 1

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

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

请参阅 SO 问题：为什么<p>标签不能<div>在其中包含标签？