constructable-style-loader

Apply CSS directly to a DOM element as a constructable stylesheet.
Constructable-style-loader creates CSSStyleSheetObject JavaScript object, which can be adopted to an element using adoptedStyleSheets setter.

It can be optionally chained with postcss-loader when need to use output from other CSS preprocessors.
If used with postcss-loader, then also consider postcss-discard-comments plugin to delete unnecessary comments
that would bloat the bundle and potentially have invalid characters that can break the parser.

Getting Started

To begin, install constructable-style-loader:

``console
npm install --save-dev constructable-style-loader
`

Then add the loader to your webpack config. For example:

style.css

`css
.panel {
background-color: orange;
border-style: solid;
}
`

panel.js

`js
import style from './style.css';

class Panel extends HTMLElement {
constructor() {
super();

this.attachShadow({mode: "open"});
this.shadowRoot.innerHTML = ;
this.shadowRoot.adoptedStyleSheets = [style]
}
}

if (customElements.get('ata-panel') == null) {
customElements.define('ata-panel', Panel);
}
`

webpack.config.js

`js
module.exports = {
module: {
rules: [
{
test: /\.css$/i,
use: ['constructable-style-loader'],
},
],
},
};
`

Optional usage with purgecss

Loader options accept object that will be passed to purgecss plugin (assuming it is installed), if {purge: true} property is present.

webpack.config.js

`js
module.exports = {
module: {
rules: [
{
test: /\.css$/i,
use: [
{
loader: 'constructable-style-loader',
options: {
purge: true,
content: ['*/.js'],
safelist: ['white-listed']
}
},
]
},
],
},
};
`

If constructable-style-loader is chained after post-loader`, purgecss will be given AST root from PostCSS
to avoid duplicate parsing of CSS string.

$3

In case of web components, creating a separate CSS tree per component ended up being unnecessary.
Browser does not appear to be duplicating CSS tree in every place where it is applied the way inserting