shadow DOM 不显示内容。 如何使内容在 DOM 中可见？

Question

如您所见，我想动态添加内容，但 shadow DOM 未显示内容如何使内容可见？ 我想让内容可见。

 let shadow = document.querySelector('#nameTag').createShadowRoot(); let content_area = document.querySelector("#nameTag"); content_area.innerHTML = '<p>Hello world!</p>'; let template = document.querySelector('#nameTagTemplate'); shadow.appendChild( template.content.cloneNode(true) ); shadow.appendChild( template.content );

 h2{ color: red; font-size: 24px; font-weight: bold; }

 <h2>Hello world!</h2> <div id="nameTag"></div> <template id="nameTagTemplate"> <div class="outer"> <div class="name"></div> </div> </template>

Answer 1

首先，您应该使用 V1 函数attachShadow而不是 V0 函数createShadowRoot 。 V0 规范已弃用，大多数浏览器均不支持，并将很快从 Chrome 中删除。

其次，您的模板中需要一个<slot> ， <div id="nameTag"></div>将显示在其中。

第三，您将模板的克隆和原始模板附加到 shadowRoot 中。 不确定你想这样做，所以我在我的例子中去掉了它。

 let shadow = document.querySelector('#nameTag').attachShadow({mode:'open'}); let content_area = document.querySelector("#nameTag"); content_area.innerHTML = 'I show in the slot'; let template = document.querySelector('#nameTagTemplate'); shadow.appendChild( template.content.cloneNode(true) );

 h2{ color: red; font-size: 24px; font-weight: bold; } #nameTag { border: 1px dashed blue; }

 <h2>Hello world!</h2> <div id="nameTag"></div> <template id="nameTagTemplate"> <div class="outer"> <div class="name"><slot></slot></div> </div> </template>