web-component-live-scoped-css-polyfill v1.4.3

Live scoped CSS polyfill for Web Components

When I started to use Web Components I discovered that the polyfills provided by the Polymer team works great except for some problems I got with the ShadyCSS polyfill. The ShadyCSS polyfill requires some manual work to get it up and running and it does not support dynamically changed styles.

This polyfill provide with an alternative to @webcomponents/shadycss that will add support for dynamically scoped CSS.

If you are using a standard library it will not require any manual setup. If you are using custom elements standalone, please read about "renderMethod" in the "Configuration" section.

How to Install

Only this polyfill

npm install web-component-live-scoped-css-polyfill

All recommended polyfills

npm install core-js @webcomponents/webcomponents-platform @webcomponents/custom-elements @webcomponents/shadydom @webcomponents/template web-component-slotchange-polyfill web-component-live-scoped-css-polyfill

Usage

This polyfill should be added last as it is dependent on other polyfills like custom-elements to be loaded.

Include as a package

Note! The bellow file can be found here: node_modules/web-component-live-scoped-css-polyfill/lib/live-scoped-css-polyfill.min.js.

<script src="live-scoped-css-polyfill.min.js"></script>

Include as a module

require('web-component-live-scoped-css-polyfill');

Include all recommended

require('core-js/stable');
require('@webcomponents/custom-elements/src/native-shim');
require('@webcomponents/webcomponents-platform');
require('@webcomponents/custom-elements/custom-elements.min');
require('@webcomponents/shadydom');
require('@webcomponents/template');
require('web-component-slotchange-polyfill');
require('web-component-live-scoped-css-polyfill');

Configuration

Example

<script>
    window.liveScopedCSSPolyfill = {
        // Name of the render method that is called on each render.
        renderMethod: 'auto',
        
        // Set to "true" if the style is not changed during render.
        onlyScopeOnConnected: false,

        // Forces the polyfill to be loaded.
        force: false,

        // Rules to disable as a RegExp or string.
        disableRules: null,

        // Set to "true" to enable debugging.
        debug: false
    };
</script>
<script src="live-scoped-css-polyfill.min.js"></script>

Options

Supported libraries

Manual Update

This should only be necessary to do if your library is not supported and it is not possible to set a render method in the configuration.

class MyComponent {
   componentDidRender() {
       this.updateScopedCSSPolyfill();
   }
}

Known Limitations

Using a function argument on the ":host" selector is not supported yet (example: ":host(.special)").

If you have a need for a missing feature or if you have found a bug, please let me know, and I will do my best to fix it.

Release Notes

How to Develop

Installation

npm install

Compilation

npm run compile

Run watcher

npm run watch

Debugging

It is possible to debug in Chrome or Firefox by forcing all polyfills to be enabled.

<script>
    if (window.customElements) {
        window.customElements.forcePolyfill = true;
    }
    window.ShadyDOM = {
        force: true
    };
    window.slotChangePolyfill = {
        force: true
    };
    window.liveScopedCSSPolyfill = {
        force: true
    };
</script>
<script src="all-polyfills.js"></script>