feat: `::part` support in Angular's Emulated CSS parser

nadavsinai commented 6 years ago

I'm submitting a...


[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report  
[x ] Feature request
[ ] Documentation issue or request
[ ] Support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Current behavior

Angular has no real replacement for the deprecated /deep/ (aka >>> and ::ng-deep) which are all marked as deprecated.

Expected behavior

Angular should be at the forefront of web technology and provide today the technologies of tomorrow. ::part and ::theme provide a controlled and safe way to style components from outside without allowing abuse to the encapsulation that Shadow DOM is meant to provide. Explaining article Spec Draft

I would believe that such declared parts can be treated almost like @Input variables that trigger change detection. Although declared on the @Component style part they will be compiled into the .ngstyle and be incoparated in the view. when another component uses the ::part annotated component the styles are propagated.

What is the motivation / use case for changing the behavior?

a component needs to allow external users to style its inner parts, let say a dropdown needs to have it's button, drop-down list & selection hover styleable.

Angular version: 5.2.6

Browser: Any, it should compile away to allow browsers to support it today.

trotyl commented 6 years ago

Supersedes https://github.com/angular/angular/issues/7251?

karptonite commented 5 years ago

Looks like ::theme has been removed from the draft standard, so at most, this should be supporting just ::part now. https://github.com/w3c/csswg-drafts/commit/141fedfd58da556ac7d1b10e945cc4d91bb44539#diff-6c51ca844ad036fddb3fddd14d4f834f

The latest draft is here (at the moment): https://drafts.csswg.org/css-shadow-parts/

lacolaco commented 4 years ago

Shadow Part has been shipped by Safari Technical Preview 94 so it is implemented by most major browsers except Edge/IE natively. Today it is enough standard to adopt by Angular's emulated encapsulation.