Webpack loader for Custom Elements CSS
Last updated a year ago by dannymoerkerke .
ISC · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install custom-elements-css-loader 
SYNC missed versions from official npm registry.

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

The creation of Custom Elements (Web Components) can easily be polyfilled with 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'




To run the tests:

npm test

Current Tags

  • 1.0.1                                ...           latest (a year ago)

2 Versions

  • 1.0.1                                ...           a year ago
  • 1.0.0                                ...           a year ago
Maintainers (1)
Today 0
This Week 1
This Month 1
Last Day 0
Last Week 0
Last Month 0
Dependencies (4)
Dev Dependencies (0)
Dependents (0)

Copyright 2014 - 2016 © |