Web Components support?

[lazka]

Are there any plans to make it possible to just apply this to a single web component without changing any global state? For example with https://lit.dev/ ?

[surma]

Not yet. In general, ShadowDOM is not supported (I need to add that to the list!)

[surma]

Updated the README. Gonna leave this open in case anyone has an idea how to handle ShadowDOM without doing something horrible.

[lazka]

Thanks. Yeah I guess that would require quite a few changes. The API could be something like (unless I'm missing something):

import {unsafeCSS, css, html, LitElement} from 'lit';

export class Simple extends LitElement {

    static get styles() {
        this.qc = new QC();
        return unsafeCSS(this.qc.transpileStyleSheet(css`something`.toString()));
    }

    connectedCallback() {
        super.connectedCallback();
        this.constructor.qc.connect(this.shadowRoot);
    }

    disconnectedCallback() {
        this.constructor.qc.disconnect(this.shadowRoot);
        super.disconnectedCallback();
    }

    render() {
        return html`bla`
    }
}

[RobM-ADP]

For web components, we typically use constructable stylesheets which would add another layer of complexity. Supporting web components would be a huge win though.

[daKmoR]

Is anyone working on it? if not is there a general "plan of attack"?

would a transpileStyleSheet method be something to look into?

For lit specifically, I think there it will need another method before in order to convert constructible stylesheets and css results into a string...

besides that @lazka suggestions could work right? or is there more to take into account besides a mutation observer and converted css rules?

hmmm thinking about it... lits styles are "static" but I assume those styles will need to be updated whenever the mutation observer "fires" 🤔

[francjpd]

Hello!, has there been any update ? :)

[devknoll]

Thank you for your issue!

As of the latest version (currently in alpha), Shadow DOM is unfortunately not supported yet, but we'd gladly consider PRs.

Generally speaking, I don't think we'd want to expose and force you to use non-standard APIs and hooks to get things working though. Instead, I think the approach we'd like to see would e.g. monkey patch Element.attachShadow() in order to subscribe to mutation events on shadow trees, and process any <style> nodes inside appropriately.

[Marshal27]

@devknoll monkey patching Element.attachShadow() seems to work well, however, the biggest hurdle I am running into is that the CSS_Object_Model does not have the CSSContainerRule yet.

When the CSS text is passed in via replaceSync it is simply "dropped" and never makes it to the adoptedStyleSheets[0].cssRules

https://developer.mozilla.org/en-US/docs/Web/API/CSS_Object_Model

any thoughts/ideas around this?

[Marshal27]

@devknoll Think I may have it sorted, updating PR now.

[devknoll]

We've moved the polyfill to maintenance mode and aren't currently considering additional features. For Web Component + Shadow DOM support, I'd encourage you to continue to follow @Marshal27 who was working on support for this in #57.

[Marshal27]

Posting the link here for posterity.

https://github.com/Marshal27/shadow-container-query-polyfill