Contact emails

fer...@chromium.org,taba...@chromium.org

Explainer

::part and ::theme 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'simplementation will come later.

TAG review request:https://github.com/w3ctag/design-reviews/issues/230

Summary

Introducepart= 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, exposedimplementation details of custom elements and had performance problems. This proposal gives custom elements a clear API and avoids leakingimplementation details.

Risks

Interoperability and Compatibility

Edge: Pending response inhttps://github.com/w3c/csswg-drafts/issues/2368

Firefox: "worth protoyping" in thisissue

Safari: Supportive of approach in thisissue

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 thefeature dashboard

https://www.chromestatus.com/feature/5763933658939392

Requesting approval to ship?

No