仅在 Web 组件范围内使用 webpack 捆绑 CSS答案

【问题标题】：Use webpack bundled CSS only in scope of webcomponent仅在 Web 组件范围内使用 webpack 捆绑 CSS
【发布时间】：2019-03-18 12:10:07
【问题描述】：

我正在使用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>

custom-menu 标签是我的网络组件。它按预期显示样式化的自定义组件。

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

我的 webpack 配置：

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 并将ExtractTextPlugin 的extract 函数应用于所有css 文件。然后在 widget/ 目录中找到与样式 styles.css 一起生成的包。

【问题讨论】：

标签： webpack extract-text-plugin

【解决方案1】：

这是我发现的：

我发现preact shadow dom 允许实现影子DOM。 shadow 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;
}

【讨论】：