You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
There are two types of CSS encapsulation the shadow DOM provides: upper bound and lower bound. For browsers that don't support shadow encapsulation, the former is easy to solve via component name prefixing. The latter is near impossible to solve in a performant way. This is why I've generally been advising to use the child (>) selector over the descendent () selector to avoid leaking styles to children. Components have a known structure and it's usually very rare that authors actually intend to say "match from here to infinity". This should also be faster. In retrospect, the ubiquitous use of the descendent selector over the child selector is mostly just a product of bad habits imho.
However, there is a proposal in vercel/next.js#249 that would potentially solve this problem in a performant way. We already transform styles AOT, but the additional concept is to tag each element with it's direct parent which would help limit applying styles to non-direct children elements.
/cc @rauchg who came up with the idea and we discussed a few aspects with.
The only thing I'm not sure about is the API surface. Ideally it should be another render middleware:
// per-componentexportdefaultencapsulate(functioncomponent(node,data){..})// or globallyripple.draw=encapsulate(ripple.draw)
However, need to see if would be more performant to do this at the once helper function level.
The text was updated successfully, but these errors were encountered:
There are two types of CSS encapsulation the shadow DOM provides: upper bound and lower bound. For browsers that don't support shadow encapsulation, the former is easy to solve via component name prefixing. The latter is near impossible to solve in a performant way. This is why I've generally been advising to use the child (
) selector to avoid leaking styles to children. Components have a known structure and it's usually very rare that authors actually intend to say "match from here to infinity". This should also be faster. In retrospect, the ubiquitous use of the descendent selector over the child selector is mostly just a product of bad habits imho.
>
) selector over the descendent (However, there is a proposal in vercel/next.js#249 that would potentially solve this problem in a performant way. We already transform styles AOT, but the additional concept is to tag each element with it's direct parent which would help limit applying styles to non-direct children elements.
/cc @rauchg who came up with the idea and we discussed a few aspects with.
The only thing I'm not sure about is the API surface. Ideally it should be another render middleware:
However, need to see if would be more performant to do this at the once helper function level.
The text was updated successfully, but these errors were encountered: