如何解决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' 作用域”
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。