webpack 中的 shadowDOM 样式

问题描述

我第一次在 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变得更长时，这种设置style.textContent的方法会变得乏味。

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

解决方法

第一个问题应该总是；我真的需要 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' 作用域”