Web 组件和影子根答案

【问题标题】：Web component and shadow rootWeb 组件和影子根
【发布时间】：2018-01-22 16:42:35
【问题描述】：

我在使用模板的地方用这段代码创建了一个 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));

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

【问题讨论】：

标签： web-component shadow-dom html5-template native-web-component

【解决方案1】：

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

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

查看 SO 问题：Why <p> tag can't contain <div> tag inside it?

【讨论】：