Stuck on an issue?
Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.
And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.
docs: clarify support for ViewEncapsulation.ShadowDom
See original GitHub issueProposal
What is the expected behavior?
If ViewEncapsulation.ShadowDom is not supported, this should be called out in the docs to save developers time and frustration.
What is the current behavior?
ViewEncapsulation.ShadowDom is not supported and is not documented.
What are the steps to reproduce?
- Open https://stackblitz.com/edit/angular-i5jw3k?file=app/table-selection-example.ts
- Notice how the checkboxes aren’t themed
- Open https://stackblitz.com/edit/angular-sbrzfb?file=app/input-overview-example.ts
- Notice how the inputs are not themed or styled properly
What is the use-case or motivation for changing an existing behavior?
To save developers time and frustration.
Which versions of Angular, Material, OS, TypeScript, browsers are affected?
Angular: 7.0.0 Angular Material: 7.0.2 TypeScript: ~3.1.1 Browsers: Tested on Chrome, Firefox, and Safari latest stable versions
Is there anything else we should know?
Nope
Issue Analytics
- State:
- Created 5 years ago
- Reactions:26
- Comments:8 (4 by maintainers)
Top Results From Across the Web
View encapsulation - Angular
ViewEncapsulation.ShadowDom, Angular uses the browser's built-in Shadow DOM API to enclose the component's view inside a ShadowRoot, used as the component's ...
Read more >How to Explain ViewEncapsulation in Angular to Your Child
First, I would like to use the Parent style in representing the main style outside of the style of the component you want...
Read more >Angular ViewEncapsulation.ShadowDOM doesn't isolate css ...
After that, setting any css in style.css will affect the elements under AppComponent even though the encapsulation is set to ViewEncapsulation.
Read more >Angular explained: What is View Encapsulation? - Medium
Explain their differences and show which one is used in Angular. ... it uses an emulation. As most browsers don't support Shadow DOM...
Read more >View Encapsulation in Angular - TekTutorialsHub
Hence it achieves true encapsulation. The Shadow DOM is part of the Web Components standard. Not all browsers support shadow dom. Use google ......
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
We are now approaching mid 2020. What is the status and roadmap of this?
Being able to use material in components with ShadowDom opens a lot of opportunities and cleaner components/code/CSS.
Angular is dropping IE11 support in v13, which opens the door to us switching to CSS variables, which would make it possible to support Shadow DOM.
Sometime in the next year we do plan on revamping our theming system. This would involve switching to CSS variables and aligning more closely with the current Material Design spec, and would probably coincide with moving the MDC-based components to stable. However, we don’t yet have the detailed design of what that would look like.