When stylesheets are parsed, CSS child combinators are ignored
Closed this issue · 2 comments
I noticed that when a stylesheet implements something like:
.foo {
color: black;
}
.bar {
color: white;
}
.foo > .bar {
color: blue;
}
.bar
will always be blue, because .bar is treated as a separate selector without the child combinator before it.
To get around this I have a task to remove all child combinators in the stylesheet that's used with livingcss. This isn't ideal since it wouldn't cover cases where the styling should only affect immediate children of said selector.
I tried finding the root case, but ran out of time. If you point me in the right direction though to where the parsing takes place, I might be able to fix it. Perhaps it's part of Polymer?
Hu, that is definitely strange. I'm going to go with something on Polymer's end since livingcss shouldn't be messing with the creation of the style tag that the web component uses. I use a handlebars template to load the web component, which uses a style include to scope your styles to just the web components. It seems like something during that process is breaking the styles (livingcss puts them directly as is into the style template section).
I'm going to close this. If you feel that it's still an issue with this codebase, we can reopen it and look into it further.