angular / angular/angular

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

Open
#22,515 7 comments 46 reactions 0 assignees View on GitHub
area: core core: CSS encapsulation feature feature: under consideration
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.