search

salesforce / lwc

⚡️ LWC - A Blazing Fast, Enterprise-Grade Web Components Foundation
https://lwc.dev
Other
1.65k stars 394 forks source link

Remove ID selector restriction in CSS for native shadow #2571

Open nolanlawson opened 3 years ago

nolanlawson commented 3 years ago

The LWC compiler will complain if the CSS contains an ID selector:

#foo {
  color: red;
}
[!] (plugin rollup-plugin-lwc-compiler) Error: CssSyntaxError: LWC1009: /file.css:6:2:
    Invalid usage of id selector '#foo'. Try using a class selector or some other selector.

In native shadow, it's perfectly acceptable to use ID selectors, because IDs aren't mangled as they are in synthetic shadow (e.g. foo-0, foo-1, foo-2, etc.). There should probably be some way to disable this check for native shadow components.

uip-robot-zz commented 3 years ago

This issue has been linked to a new work item: W-10133774

caridy commented 3 years ago

well, certainly, the main issue is how to support that component in non-native? is that's not supported, then yes. The idea to restrict it everywhere is to have more confident that the component will work with or without native.

nolanlawson commented 3 years ago

Good point, yes. Although it just occurred to me that we also want to support ID selectors for light DOM. Perhaps that's easier to support.

ekashida commented 3 years ago

With the advent of mixed shadow mode, we would only be able to remove the restriction if the light component isn't shadowed because light components can render anywhere in the tree. Then the component itself would have to support both the shadowed and non-shadowed case, making id-usage more trouble than it's worth.

nolanlawson commented 2 years ago

Hm, it seems to me that if a light DOM component is inside a native shadow component, then it should still be able to use IDs. Its IDs may conflict with IDs for other light DOM components inside the shadow tree, but that's the downside of light DOM.

Whereas a light DOM component inside of synthetic shadow roots do not have their IDs mangled. (I just tested to confirm.) So in this case as well, ID selectors would work.

Maybe this error should be turned into a warning? It sort of feels like, if we can't predict at compile-time whether a component is native or synthetic, we should leave it up to the developer to use a potentially problematic CSS selector.