Skip to content

feat(style-inheritance-test): implement and compare different style inheritance strategies#17043

Draft
desig9stein wants to merge 3 commits intomasterfrom
style-inheritance-test
Draft

feat(style-inheritance-test): implement and compare different style inheritance strategies#17043
desig9stein wants to merge 3 commits intomasterfrom
style-inheritance-test

Conversation

@desig9stein
Copy link
Contributor

Add components to demonstrate three approaches to style inheritance:

  1. styleUrls array (duplicated styles).
  2. Single styleUrl (no inheritance, missing styles).
  3. Adopted StyleSheets API (shared styles without duplication).

Includes supporting shared services, directives, and documentation.

TEST: Open this sample after checking out the branch
http://localhost:4200/style-inheritance-test to see all three approaches compared side-by-side

Additional information (check all that apply):

  • Bug fix
  • New functionality
  • Documentation
  • Demos
  • CI/CD

Checklist:

  • All relevant tags have been applied to this PR
  • This PR includes unit tests covering all the new code (test guidelines)
  • This PR includes API docs for newly added methods/properties (api docs guidelines)
  • This PR includes feature/README.MD updates for the feature docs
  • This PR includes general feature table updates in the root README.MD
  • This PR includes CHANGELOG.MD updates for newly added functionality
  • This PR contains breaking changes
  • This PR includes ng update migrations for the breaking changes (migrations guidelines)
  • This PR includes behavioral changes and the feature specification has been updated with them

…nheritance strategies

Add components to demonstrate three approaches to style inheritance:
1. `styleUrls` array (duplicated styles).
2. Single `styleUrl` (no inheritance, missing styles).
3. Adopted StyleSheets API (shared styles without duplication).

Includes supporting shared services, directives, and detailed documentation.
…esearch

Expand documentation with official resources, community discussions, and framework implementations related to adoptedStyleSheets. Includes links to MDN, web.dev, Angular documentation, and GitHub discussions for further exploration.
…styling experiment

Introduce `BaseNoEncapsulationComponent` with `ViewEncapsulation.None` to test global styling behavior. Added `ChildFComponent` to explore inheritance from unrendered base component. Enhanced documentation and page layout to include findings, pros, cons, and references.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant