webpack 中的 shadowDOM 样式

Question

我第一次在 webpack 包中用纯 javascript 编写自定义元素。我以此为例：reusable custom select element in javascript

我也在这个项目中使用 style-loader。

在此示例中，样式是在对象内的文本中创建的，这里是我创建对象和设置样式的简化版本：

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 get 较长时，这种设置 style.textContent 的方法会变得乏味。

我的问题是，你能把 css 代码分成另一个文件吗？ 我读到样式加载器不起作用，我的实验证实了这一点。我还尝试导入一个 css 文件并尝试以某种方式将其插入到样式对象中。我无法让它工作。有人出主意吗？

Answer 1

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

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

• 如果你这样做.. 有很多学习机会：
  https://css-tricks.com/styling-a-web-component/

  • CSS 变量
  • ::零件
  • lightDOM 和插槽
  • 可构造样式表
  • 等

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

 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 文档中先调用 super() 的说法是错误的；它应该说：

"调用 super() 初始化 'this' 作用域"