This repository has been archived by the owner on Dec 21, 2021. It is now read-only.
Add support for Shadow DOM CSS #5
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
Friendly ping. |
|
Unfortunately, |
romainmenke
pushed a commit
to csstools/postcss-plugins
that referenced
this pull request
Nov 16, 2021
* Add support for shadow DOM CSS * Change spaces to tabs for consistency * Fix comment language * Make sure this won't do anything to selectors with leading :root Co-authored-by: Zacky Ma <[email protected]> Co-authored-by: Jonathan Neal <[email protected]>
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
When working on a Custom Element, if Shadow DOM is turn on, selectors like
[dir="rtl"] .fooin Custom Element’s CSS won’t work, unless you adddirattribute to an element inside the Shadow DOM.While the workaround could work, it’s not really a good idea to add
dirattribute when it’s not necessary, e.g. if the value of:root[dir]has changed, you have to make sure thediralso gets updated in your Shadow DOM.So I’m proposing to add an option to transform
:dir()selector for Shadow DOM, i.e. instead of creating a leading[dir]selector, create leading:host-context([dir])selector, in this way, Shadow DOM will be aware of the directional context of where the component is living in.This is not very perfect as this will also transform global CSS, i.e. CSS rules that are not in any components. But I don’t have a good idea of how the plugin can figure out whether or not the current rule is part of Shadow DOM or not. So perhaps developers can preprocess global CSS separately from Shadow DOM CSS.