shadow DOM没有显示内容。如何在DOM中显示内容?

问题描述 投票:2回答:1

如您所见,我想动态添加内容,但影子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>
javascript jquery html css shadow-dom
1个回答
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>
© www.soinside.com 2019 - 2024. All rights reserved.