Published on July 7, 2017 by Chrome
Want create site? Find Free WordPress Themes and plugins.

Shadow DOM is a newer web platform feature that lets you scope your CSS and markup. This is great for preventing style leakage, but it can also make things tricky when it comes to accessibility. In particular, labeling content inside of a shadow root. Today on A11ycasts I’ll show a couple techniques I use to work around this thorny problem.

Demo source – goo.gl/F6x4YK

Shadow DOM primer – goo.gl/Gz2aHH

Accessibility Object Model (AOM) – goo.gl/MQ41Z2

Watch all A11ycasts episodes: goo.gl/06qEUW

Subscribe to the Chrome Developers YouTube channel for updates on new episodes of A11ycasts: goo.gl/LLLNvf

Did you find apk for android? You can find new Free Android Games and apps.

Leave a Reply

18 Comments on "How to label Shadow DOM"

Notify of
avatar

Codient
Guest
Codient
2 months 9 days ago

Apple's MacBookMicrosoft's IDEGoogle's BrowserDid anyone else notice it ?

Code boy
Guest
Code boy
2 months 12 days ago

I love your videos, everything is so clear and perfect!

Dawid Warpas
Guest
Dawid Warpas
2 months 14 days ago

Very insightful! On top of the main topic, I learned about aria-labels!

robrez
Guest
robrez
2 months 17 days ago

very interesting. it seems like we're still missing a feature of labels… tapping them sometimes toggles values (check box, radio) or sets focus (inputs)… a while back I took a stab at a custom label element that tried to solve that problem. it also listened for focus events to it's target to support styling based on focus.

Rob Dodson
Guest
Rob Dodson
2 months 12 days ago

yep that's another awesome feature that we're missing out on 🙁 A custom-element label would be great but I wish I didn't have to reinvent existing elements just to get one or two features. Hopefully future iterations of Custom Elements will allow this.

Joaquín Sánchez
Guest
Joaquín Sánchez
2 months 17 days ago
Hi Rob:how about nested components like paper-input?For example, how to label this with shadow dom (describe native input with section1)?<main><section><h2 id="section1">Identification</h2><paper-input label="First name" auto-validate required error-message="required, min 1, max. 20" minlength="10" maxlength="20" char-counter></paper-input></section><main>In fact, chrome accesibility inspector does not resolve any of these aria attrs from paper-input-behavior:aria-describedby: paper-input-add-on-1 paper-input-add-on-2aria-labelledby: paper-input-label-3From polymer shop app all these decorators are built-in components, there is not any reference to paper elements, so I assume that shadow dom has a very very big problem with a11y. If you look at shop-checkout element, you can see there are a lot of boilerplate code, only to decorate each input in… Read more »
Rob Dodson
Guest
Rob Dodson
2 months 12 days ago

Yeah I actually have a PR to start to address some of this. github.com/PolymerElements/paper-input/pull/549

Andy W
Guest
Andy W
2 months 17 days ago

#RIPPolycasts 😀 All joking aside, great video this was very helpful.

Thomas Orlita
Guest
Thomas Orlita
2 months 17 days ago

2:04 is there a way to do the opposite – affect an element outside the shadow DOM? For example change background-color of its parent element?

Rob Dodson
Guest
Rob Dodson
2 months 12 days ago

nope. That would violate the scoping model.

Tim van der Lippe
Guest
Tim van der Lippe
2 months 17 days ago

Are these approaches preferred over passing the label element into the light dom? Then it would be progressive enhancement right?

Rob Dodson
Guest
Rob Dodson
2 months 12 days ago

I don't think a distributed label will actually be able to label content in the Shadow DOM. Also if you're using for= you'd have to know the ID of the element you're labeling so that feels kind of like it would violate the encapsulation model.

Patrick Lauke
Guest
Patrick Lauke
2 months 17 days ago

So I take it there's no way to have a label element in the HTML document itself and have that relationship automagically go into the Shadow DOM itself? Can the script in the component see/read if anything in the main document is somehow "pointing" to it and grab that text to populate its own visibly hidden label or aria-label ?

Rob Dodson
Guest
Rob Dodson
2 months 12 days ago

No, labels in the main document can't automagically affect stuff in the Shadow DOM. Yes the element could do something like that and I considered that approach. However, you'll also need to create a Mutation Observer to watch that label and update your own internal label anytime the external one's text changes. It felt a little too clunky so I opted for the custom label= attribute instead.

Tim Lundqvist
Guest
Tim Lundqvist
2 months 17 days ago

TFW you copy-paste your code and forget to edit the name of your end tag. This is the reason XHTML exists. 😉

Rob Dodson
Guest
Rob Dodson
2 months 12 days ago

yeah I noticed that after the fact. whaaaaatever 😀

wpDiscuz