Explaining the Shadow DOM | Developer Quick Takes

Understand what Shadow DOM is, and how Lightning web components leverage it to encapsulate component’s markup, CSS and behaviour.

Track: BeatFort - Rampant Sunrise
Music provided by Ninety9Lives

[anderivative]

She needs her own channel! That whole prez was absolutely perfect. Showed step by step from broad to specific and the differences with the vendor implementation.

[jasonli]

Why does this sound so epic? "The events that you fire from the inner elements from the shadow tree are not going to escape the shadow boundary"

[yatin]

As a beginner, I was able to understand this completely and honestly I can't fathom how brilliantly this was taught. I'm so glad having invested considerable time for JS fundamentals.

[RenoirB]

Amazing talk, I've been using all of this for a while now and that's my favourite explanation!

[lmkcolassi.]

Thank you Alba, really appreciate your generosity that was simple concise and easy to understand. Hope your are well. peace and bounty to you

[RajendraSinghRSN]

Quick takes are good as they are easily consumable as compared to long sessions where 10-15 mins are wasted on arrangement & not so useful slides.
Nice & well organized content 👍

[DmitriGoncharov]

Please make more videos like that! Thank you for a short yet great video!

[theidk]

You know what is funny? I just tried so hard to access your iframes via injected script (in salesforce app) to modify it, because the text iframe doesnt have features our team needs. I tried for hours and thought to myself "what the hell, why is it not in DOM when I see it?". And then I found out this video, from Salesforce explaining how it works :D. Well, atleast Im a little smarter, but its a shame that I cannot do anything with that editor.

Thank you for the explanation, indeed its an extremely nice feature, only for me right now a little limiting.

(If you are curious, the problem I had was with the Salesforce text editor, where highlighting text and pressing ctrl+v doesnt make the text a hyperlink but instead rewrites it)

[aritramukherjee]

This is nice comparison. Short and crisp. Thanks.

[liamhunt]

Why does this have so many dislikes? Just curious if there's something inaccurate in the video. Seems pretty helpful to me

[softwareengineeringandsale]

Nice video, not sure why this has so many down votes. People are weird.

[philippreich]

can i use multiple Off-Plattform LWC on the same page?

[gabrielmayta]

Nice short video, LWC seems a very good library to work with WebComponets. Just one question is it possible to disable the shadowDOM?

[viggie]

Very helpful to simple to understand! Thanks.

We're having an issue with a 3rd party JS that's trying to translate the page content dynamically - we use Lightning Out to render a Lightning component within a VisualForce page - the shadow-root fragment surrounding the Lightning component is random in this case. Whenever the the component is encapsulated within the shadow-root fragment the 3rd party JS results in a rendering issue. Is there a way to consistently always produce or exclude the shadow-root fragment?

[Khriztopher]

what is the use case scenario of Shadow DOM?

[julianancizarhurtadotorres]

Edge chromium supports native DOM. This version was deployed in all windows 10 in the last update.

[lmkcolassi.]

Should you have referred LIGHT DOM as ROOT DOM instead ?

[yveromeev]

Only one silly tiny moment: Salesforce LWC DOESN'T USE SHADOW DOM like it's supposed to be. Instead, they add unique attributes in order to split CSS

[rahuljawale]

will the css from the outer(main) DOM effect the styling of shadow dom??

[baddu]

So any mark up inside div tags in lightning web component is by default encapsulated or can be considered as a shadow tree?