Join GitHub today
GitHub is home to over 28 million developers working together to host and review code, manage projects, and build software together.Sign up
css attribute selector [title~="flower"] doesn't work with view encapsulation #9644
I'm submitting a ...
And Angular create this:
If I run the code the text color for "Test 1" turns blue and "Test 2" is still black. But if I change the code as followed within the Chrome debugger, "Test 2" will become red.
I don't see the reason for this behavior but for me it seems to be wrong.
The results were the same on Chrome and Firefox on a windows machine with angular rc1 and rc3. If encapsulation is set to ViewEncapsulation.None the css code works as expected, but I need the encapsulation.
Do you need further information for this issue? I want to build a little widget and need a fix for it.
If you tell me where the css code is written to the html head, I could try to fix it on my own and create a pull request. I think it's somewhere within the ShadowCss class (shimCssText()), but I havn't debugged yet.
Btw. one[attr~="value"] is missing within the unit tests.
added a commit
Sep 17, 2016
The problem is the tilde within the seperators list within shadow_css.ts (line 429). My idea to remove the tilde from there doesn't work for the selector
Another solution could be to edit the final string with something like this:
var scopeSelectorExpression = new RegExp(
I don't really like this solution, but it should solve the problem. I can't be sure because the unit tests aren't running locally.