https://github.com/dannymoerkerke/custom-elements-css-loader

Webpack loader for Custom Elements CSS
https://github.com/dannymoerkerke/custom-elements-css-loader

css custom-elements webcomponents webpack

Last synced: 3 months ago
JSON representation

Webpack loader for Custom Elements CSS

• Host: GitHub
• URL: https://github.com/dannymoerkerke/custom-elements-css-loader
• Owner: DannyMoerkerke
• License: other
• Created: 2019-02-27T15:33:06.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2019-03-27T15:15:56.000Z (over 7 years ago)
• Last Synced: 2025-03-08T12:15:54.834Z (over 1 year ago)
• Topics: css, custom-elements, webcomponents, webpack
• Language: JavaScript
• Size: 13.7 KB
• Stars: 1
• Watchers: 0
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: readme.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# Custom elements CSS loader

This is a webpack loader which fixes CSS inside Custom Elements Shadow

DOM for browsers that don't support

[Custom Elements V1](https://caniuse.com/#feat=custom-elementsv1)

The creation of Custom Elements (Web Components) can easily be polyfilled

with [webcomponentsjs](https://github.com/webcomponents/webcomponentsjs)

but to make sure that the CSS inside Shadow DOM

works correctly, the Shady CSS polyfill will need to be used which means

that the source code will also need some modification.

I found this undesirable so I created a Webpack loader to fix this.

It basically does two things:

It prefixes all CSS rules inside the Shadow DOM of your web component

that do not start with `::host` or `::slotted` with the tagname of the

element to provide proper scoping.

After that it parses all `::host` and `::slotted` rules to make sure

these also work correctly.

Note that this loader only works for browsers that do NOT support Shadow

DOM.

## How to use

Install with npm:

`npm install custom-elements-css-loader`

Then add the loader to your webpack config:

```

module.exports = {

    ...

    module: {

        rules: [

            {

                test: /\.js$/,

                use: [

                    {

                        loader: 'custom-elements-css-loader'

                    }

                ],

            }

        ]

    }

    ...

}

```

### Testing

To run the tests:

`npm test`