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>