Intent to Implement: CSS shadow parts
Fergal Daly
Contact emails
fer...@chromium.org, taba...@chromium.org
Explainer
Design doc/Spec
https://drafts.csswg.org/css-shadow-parts/
Spec is solid on semantics of ::part but may receive some updates on syntax for forwarding and splitting attribute into separate naming and forwarding attributes.
Spec has some pending changes and ongoing debate related to theme, so theme's implementation will come later.
TAG review request: https://github.com/w3ctag/design-reviews/issues/230
Summary
Introduce part= attributes and ::part(ident) CSS pseudo element to allow custom elements to expose specific sub-elements for styling by the containing light-tree.
Motivation
Previous methods like /deep/ and >>> were overpowered, exposed implementation details of custom elements and had performance problems. This proposal gives custom elements a clear API and avoids leaking implementation details.
Risks
Interoperability and Compatibility
As this is a new feature which Chromium is leading with, we will solicit community feedback and deliver a complete WPT test suite. The initial implementation will be behind a flag or use origin trials until the spec finalizes.
Edge: Pending response in https://github.com/w3c/csswg-drafts/issues/2368
Firefox: "worth protoyping" in this issue
Safari: Supportive of approach in this issue
Web developers: Polymer team are supportive
Ergonomics
Part is a new CSS selection extensions. Performance is unknown as yet. Previous shadow-piercing selectors had performance problems. ::part should allow better performance in certain cases. No new threading or synchronization semantics are introduced.
Activation
This feature is likely to require transpiler support for developers targeting legacy browsers. We're actively looking for feedback from Web Component authors. As the this feature is designed to address are a top request from Polymer and other framework users, we anticipate working with Web DevRel to reach those communities for feedback.
Debuggability
Search box in DevTools Elements tab should support this and be able to show where in the shadow tree a selector has matched.
Will this feature be supported on all six Blink platforms (Windows, Mac, Linux, Chrome OS, Android, and Android WebView)?
Yes.
Link to entry on the feature dashboard
https://www.chromestatus.com/feature/5763933658939392
Requesting approval to ship?
No