Question

我正在使用webpack和extract-text-webpack-plugin捆绑一个Web组件（使用preact-custom-element创建）及其样式。

我能够在单独的html文件中成功使用组件，如下所示：

<!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="styles.css"> </head> <body> <div> <script async src="./webcomponent.js" type="text/javascript"></script> <custom-menu name="Test"></custom-menu> </div> </body> </html>标签是我的Web组件。它按预期显示样式化的自定义组件。

但是，我想知道是否有可能仅将我的自定义CSS（使用提取的custom-menu文件插入）仅应用于自定义元素，并且不允许该样式潜在地覆盖属于html元素的其他样式在Web组件之外。

我的webpack配置：

styles.css

它使用我的自定义组件const path = require('path'); const ExtractTextPlugin = require("extract-text-webpack-plugin"); module.exports = { entry: { webcomponent: './lib/menu/menu-panel-webcomponent-controller.widget.js' }, module: { rules: [ { test: /\.css$/, use: ExtractTextPlugin.extract({ fallback: "style-loader", use: "css-loader" }) } ] }, output: { path: path.resolve(__dirname, 'widget/') }, plugins: [ new ExtractTextPlugin("styles.css") ] };，并将menu-panel-webcomponent-controller.widget.js的{{1}}函数应用于所有CSS文件。然后在extract目录中找到样式ExtractTextPlugin旁边的结果包。

Answer 1

这是我发现的东西：

我发现preact shadow dom允许实现影子DOM。影子DOM允许使用范围限定的CSS，这意味着CSS仅绑定到组件，既不会受到外部的影响，也不会泄漏到其范围之外。

但是，请注意，MS Edge当前不支持影子DOM（请参阅其roadmap）。

我还发现，本地CSS范围也只能使用webpack来完成。参见https://github.com/webpack-contrib/css-loader。但是，加载程序会使用唯一标识符显式替换本地选择器。

示例：

:local(.className) {
  background: red;
}

导致：

._23_aKvs-b8bW2Vg3fwHozO {
  background: red;
}

Answer 2

否，文档中放置的任何样式表都将应用于整个文档。为什么要这样做？

仅在webcomponent范围内使用webpack捆绑的CSS

2 个答案: