首页 文章

Web组件和影子根

提问于
浏览 次
1

我使用此代码创建一个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));

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

enter image description here

web-component shadow-dom html5-template native-web-component

1 回答

  • 2

    它与Shadow DOM或Custom Element无关 .

    实际上，普通DOM会发生相同的行为：您无法在 <p> 元素中插入 <div> 元素 . 后者只接受措辞内容 .

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

    回复于

相关问题