Question: Web Component support

[lazka]

Hey, I tried to get this to work with lit, but failed: https://codepen.io/lazka/pen/ExWgrYb

I was wondering if I'm missing something or if this isn't supported?

[nardbagel]

Hmmm. could be that you are importing the polyfill in the global scope, but the styles declared in the web-component are rendered in the component's shadow dom, and the script can't polyfill what it can't see. The fix I am guessing is to import the script inside the web-component so the polyfill can see the css in the component's shadow dom. I am new to web-components and container queries, but stuff like this has bitten me in the past, so I'd guess this is the culprit.

[lazka]

hm, I'm not sure what you mean. I'm explicitly passing the shadow root to the polyfill.

[stickeegreg]

I had the same problem with it not working in a Web Component.

I believe the problem is the way it builds the selector in getElementSelectorText.
It uses :root and traverses up the element's parents, but the traversal stops at the top of the shadow DOM, whereas :root refers to the root element of the host page, so the selector won't match anything.

I couldn't find an equivalent to :root that would match the web component's root node, so for now I've replace getElementSelectorText with this, and it seems to work so far:

elementId = 0,
getElementSelectorText = (element) => {
    if (!element.dataset.cqfillId) {
        element.dataset.cqfillId = ++elementId;
    }

    return `[data-cqfill-id="${element.dataset.cqfillId}"]`;
},