feat: `::part` support in Angular's Emulated CSS parser
- Dominant language
- TypeScript
- Stars
- 101k
- Forks
- 27.5k
- Avg merge
- 1d 19h
- Merged PRs (30d)
- 288
Description
## 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](https://meowni.ca/posts/part-theme-explainer/)
[Spec Draft](https://tabatkins.github.io/specs/css-shadow-parts/#intro)
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.
Contributor guide
Research direction
Start by locating Angular's Emulated CSS parser and the @Component style processing that produces .ngstyle output. Compare the requested ::part and ::theme behavior with the linked CSS Shadow Parts specification and determine the required propagation semantics. Done would mean a concrete, tested definition of how declared parts are compiled and styled from outside a component.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- frontend
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 25/100