Javascript 网页包中的阴影样式

我第一次在网页包中用纯javascript编写自定义元素。我以此为例：

我在这个项目中也使用样式加载器

在本例中，样式是在对象内的文本中创建的，以下是我如何创建对象和设置样式的简化版本：

class object extends HTMLElement{
   constructor(){
     super();
     shadow = this.attachShadow({mode: "open"});
     ...
     let div = document.createElement("div");
     div.classList.add("main");
     ...
     let style = document.createElement("style");
     style.textContent = ".main{background-color=red;}"
     ...
     shadow.appendChild(div);
  }
}

显然，当css变长时，这种设置style.textContent的方法会变得单调乏味

我的问题是，能否将css代码分离到另一个文件中？

---

我读到StyleLoader不起作用，我的实验证实了这一点。我还尝试导入css文件，并尝试以某种方式将其插入样式对象。我无法让它工作。有人有想法吗？

第一个问题应该始终是；我真的需要阴影吗

• 如果没有，所有的问题都解决了，因为你只需要处理全局CSS

• 如果你想。。有很多学习的可能性：
  
  • CSS变量
  • ：：零件
  • 光与槽
  • 可构造样式表
  • 等

注意，您的代码可以进行优化：

 constructor(){
     let div = document.createElement("div");
     div.classList.add("main");

     let style = document.createElement("style");
     style.textContent = ".main{background-color=red;}"

     super() // sets and returns this-scope
        .attachShadow({mode: "open"}) // sets and returns this.shadowRoot
        .append(style,div); // read MDN for difference with appendChild
  }

Google&MDN文档中的call super（）first语句是错误的；它应该说：

“调用super（）初始化“this”作用域”

---

第一个问题应该始终是；我真的需要阴影吗

• 如果没有，所有的问题都解决了，因为你只需要处理全局CSS

• 如果你想。。有很多学习的可能性：
  
  • CSS变量
  • ：：零件
  • 光与槽
  • 可构造样式表
  • 等

注意，您的代码可以进行优化：

 constructor(){
     let div = document.createElement("div");
     div.classList.add("main");

     let style = document.createElement("style");
     style.textContent = ".main{background-color=red;}"

     super() // sets and returns this-scope
        .attachShadow({mode: "open"}) // sets and returns this.shadowRoot
        .append(style,div); // read MDN for difference with appendChild
  }

Google&MDN文档中的call super（）first语句是错误的；它应该说：

“调用super（）初始化“this”作用域”

---

好吧，说得好，我不知怎么地把阴影和自定义元素联系起来了。感谢您提供的优化示例！你不是唯一一个。模板、自定义元素和shadowDOM是三种不同的技术；所有的都可以不用另一个来使用。好吧，好的，我把阴影和自定义元素联系起来了。感谢您提供的优化示例！你不是唯一一个。模板、自定义元素和shadowDOM是三种不同的技术；所有的都可以不用另一个。