Targetting web component parts using ::part in the shadow dom itself
We can use
::part outside for styling a part in a web component but for the life of me I can't find out how to use this selector in the shadow dom <style> block itself. [part=thing] works until you have multiple parts. I've tried looking around and absolutely nobody talks about using this selector in the shadow dom but I refuse to believe it's not usable...8 Replies
Can't you select the elements like usual when you're in a shadow DOM fragment?
MDN says you can https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_shadow_DOM#adding_style_elements_in_template_declarations
MDN Web Docs
Using shadow DOM - Web APIs | MDN
An important aspect of custom elements is encapsulation, because a custom element, by definition, is a piece of reusable functionality: it might be dropped into any web page and be expected to work. So it's important that code running in the page should not be able to accidentally break a custom element by modifying its internal implementation. ...
yeah but the
::part selector doesn't work
i tried :host(::part(thing)) too, doesn't work
(busy atm so cant respond much)::part is for when you are outside of the shadow DOM, from inside you should use normal CSS. And if you want to use the part name just use an attribute selector [part*=thing]if that's the case then fair enough but it seems uttyerly bizarre to me that you cant use the actual part selector (which probbaly has much better performance) inside the element itself
i can of course just add a class but
part="thing" class="thing" feels very stupid lolAttribute selectors don't have any perceptible impact on performance, use them
maybe not serious but still gonna be worse probably because it's going to have to string match rather than use a hash map, plus there's potential for overlap there
anyway whatever, if you can't use them so be it, thanks for the input
It really doesn't matter, a
* selector anywhere in your stylesheets will have a worse impact that tens of attribute selectors
Happy to be of help