search

jsxtools / cqfill

Polyfill for CSS Container Queries
404 stars 4 forks source link

Question: Web Component support #1

Open lazka opened 3 years ago

lazka commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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

stickeegreg commented 2 years ago

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}"]`;
},