Use webpack bundled CSS only in scope of webcomponent

Question

I'm using webpack and the extract-text-webpack-plugin to bundle a webcomponent (created using preact-custom-element) and its style.

I'm able to use the component successfully in a separate html file like so:

<!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>

The custom-menu tag is my webcomponent. It shows the styled custom component as expected.

However, I want to know if there is a possibility to apply my custom CSS (inserted using the extracted styles.css file) only to the custom element and not allowing the style to potentially overwrite other styles belonging to html elements outside the webcomponent.

My webpack config:

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")
    ]
};

It takes my custom component menu-panel-webcomponent-controller.widget.js and applies the extract function of the ExtractTextPlugin to all css files. The resulting bundle alongside the style styles.css is then found inside the widget/ directory.

Patrick · Accepted Answer · 2019-03-26 11:35:13Z

1

Here is what I found:

I found preact shadow dom which allows the implementation of a shadow DOM. A shadow DOM allows scoped CSS, which means that the CSS is only bound to the component and can neither be influenced from the outside nor can it leak outside its scope.

However, note that MS Edge has currently no support for shadow DOM (see their roadmap).

I also found that local CSS scoping can be done using webpack only as well. See https://github.com/webpack-contrib/css-loader. However, the loader explicitly replaces local selectors with unique identifiers.

Example:

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

results in:

._23_aKvs-b8bW2Vg3fwHozO {
  background: red;
}

answered Mar 26, 2019 at 11:35

Patrick

2,2953 gold badges24 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

AnandPatel · Accepted Answer · 2023-07-07 08:47:21Z

0

this is work with only css this feature is not change class name in html

answered Jul 7, 2023 at 8:47

AnandPatel

1

1 Comment

Community Over a year ago

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.

Collectives™ on Stack Overflow

Use webpack bundled CSS only in scope of webcomponent

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related