Description
I'm submitting a ... (check one with "x")
[ ] bug report => search github for a similar issue or PR before submitting
[*] feature request
[ ] support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question
Current behavior
Neither ::slotted(some-ng-content-projected-child) nor ::content doesn't have any effect.
Expected behavior
Current Shadow DOM specification (or W3C Working Draft) has defined "slot" (previously "content") tag, which "ng-content" tries to emulate. Styling slotted (or ng-contained...) components should be possible using ::slotted() selector.
Specs for ":slotted()":
https://drafts.csswg.org/css-scoping/#selectordef-slotted
An usage example taken from https://developers.google.com/web/fundamentals/primers/shadowdom/
Styling distributed nodes
::slotted(compound-selector) matches nodes that are distributed into a "slot".
Let’s say we’ve created a name badge component:
<name-badge> <h2>Eric Bidelman</h2> <span class="title"> Digital Jedi, <span class="company">Google</span> </span> </name-badge>The component’s shadow DOM can style the user’s "h2" and .title:
<style> ::slotted(h2) { margin: 0; font-weight: 300; color: red; } ::slotted(.title) { color: orange; } /* DOESN'T WORK (can only select top-level nodes). ::slotted(.company), ::slotted(.title .company) { text-transform: uppercase; } */ </style>
As of now, shimming is of course needed, since there is no native support for "slotted", at least not for most browsers.
Reproduction of the problem
You can find a plunker about the issue:
https://plnkr.co/edit/4rFsfL9HBY87cesDgN9P?p=preview
What is the motivation / use case for changing the behavior?
There are several probable use cases for this, including that clear example from developers.google.com Shadow DOM guide.
Most critical one is as I do see the issue, is that you have several native "components" (h1, tr, td) projected into your component using "ng-content" ("slot"), that act's as a custom container, such as in above "name-badge" example.
A specific example I have is that I do have a custom table-like component, and want to style contained "tr" elements accordingly. Eg. I would like to set all odd rows for that said table-like components to have a dark gray background, and all even rows to have a light yellow background. I honestly don't know how to handle that without using ::slotted() (or ::content) or alternatively ditch the ViewEncapsulation completely, which is not desired.
In addition to "slot" / "::slotted()", there is a partially overlapping feature of Shadow DOM style hooks, but support for that is also missing for Angular2: #10663
In previous Angular2 versions you were able to style derived ng-contents as expected, but that was considered a misbehavior and "fixed" for RC.5 or RC.6, as you can see from comments for closed bug #7400
With Shadow-piercing combinator ">>>" (previously "/deep/") being deprecated, "slotted" and Shadow DOM style hooks are the only remaining hope for non-insane way for styling contained native elements, without breaking the view encapsulation.
#5345 is also related to this issue.
Please tell us about your environment:
- Angular version: 2.0.0-rc.X
2.0.0.-rc.7 - Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]
Chrome 52, Firefox 48, IE 11, Edge. All, I guess. - Language: [all | TypeScript X.X | ES6/7 | ES5]
all - Node (for AoT issues):
node --version=
Not relevant