gpt4 book ai didi

javascript - 影子 DOM 不显示内容。如何使内容在 DOM 中可见?

转载 作者:行者123 更新时间:2023-11-28 00:37:00 26 4
gpt4 key购买 nike

如您所见,我想动态添加内容,但 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>

最佳答案

首先,您应该使用 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>

关于javascript - 影子 DOM 不显示内容。如何使内容在 DOM 中可见?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55653108/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com