Javascript 访问阴影dom属性

这是我的脚本代码

class Pop extends HTMLElement {
  constructor() {
    super();
  }
 connectedCallback() {
 let currDoc = document.currentScript.ownerDocument;
  let template = currDoc.querySelector('#pop-up');
  let tmplNode = document.importNode(template.content, true);

  let shadowRoot = this.createShadowRoot();
  shadowRoot.appendChild(tmplNode);
  shadowRoot.querySelector("#content").innerHTML = this.innerHTML;
 }
}
 window.customElements.define("pop-up", Pop);

这是我的模板

<template id="pop-up">
    <style>
     * {
     padding: 0;
      margin: 0;
    }

.btn {
  //styling
}

.btn:hover {
  //styling
}

#box{
    //styling
    display: none;
}

#box h1{
    //styling
}

 </style>

<div id="box">
    <h1> Your Shopping Cart</h1>
    <text id="content"> </text>

    <button class="btn" onclick="close()"> Close </button>
</div>
</template>

* {
填充：0；
保证金：0；
}
.btn{
//造型
}
.btn:悬停{
//造型
}
#盒子{
//造型
显示：无；
}
#框h1{
//造型
}
你的购物车
接近

在我的索引文件中我有这个

<button class="btn" onclick="pop()">Show Pop</button>
<pop-up id="pop"> pop-up box</pop-up>

<script>
    function pop(){
        document.getElementById("pop").style.display = "block";
    }
</script>

Show Pop
弹出框
函数pop（）{
document.getElementById（“pop”）.style.display=“block”；
}

---

我正在尝试做一个弹出框。当我点击“显示弹出”按钮时，我想将显示属性从“样式”更改为“块”，从“无”。但由于某种原因，它不起作用。我对这个shadow dom elemets还不熟悉，我真的搞不懂。

很难解释这个答案中的所有内容，但下面的代码将为您提供解决方案的概述

与往常一样，MDN为web组件和影子DOM提供了完美的介绍

类Pop扩展HtmleElement{
构造函数（）{
//始终在构造函数中首先调用超级
超级（）；
让template=document.getElementById（'pop-up'）；
让templateContent=template.content；
//创建阴影根
const shadowRoot=this.attachShadow（{mode:'open'}）
.appendChild（templateContent.cloneNode（true））；
//连接近距离侦听器
this.shadowRoot.querySelector（'.btn'）.addEventListener（'click'，this.close.bind（this））；
}
//关闭弹出窗口
关闭（）{
this.style.display='none'；
}
//打开弹出窗口
开（）{
this.style.display='block'；
}
}
window.customElements.define（“弹出”，pop）；
函数pop（）{
//注意，我们在这里使用的是open方法
document.getElementById（“pop”）.open（）；
}

：主持人{
显示：无；
}
* {
填充：0；
保证金：0；
}
.btn{
//造型
}
.btn:悬停{
//造型
}
#盒子{
//造型
显示：无；
}
#框h1{
//造型
}
你的购物车
接近
表演流行音乐
弹出框

我忘了说模板和脚本在一个文件中，与索引文件分开。你能解释一下：host的含义吗？在这个例子中，我们在哪里实际使用它？还有这段代码“this.close.bind（this）”在事件Listener中，CSS伪类函数选择阴影DOM的阴影主机。

this.close.bind（this）

方法创建一个新函数，该函数在调用时将其

this

关键字设置为提供的值。