Explaining the Shadow DOM | Developer Quick Takes

[@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.

[@SalesforceDevs]

She does! kzbin.info

[@yatin1370]

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.

[@jasonli1060]

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"

[@hiddenwasabi]

Very clear and easy to understand. Thank you!

[@RenoirB]

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

[@lmkcolassi.9389]

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 👍

[@SalesforceDevs]

Thank you for the feedback!

[@softwareengineeringandsale4005]

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

[@aritramukherjee]

This is nice comparison. Short and crisp. Thanks.

[@theidk9567]

You know what is funny? I just tried so hard to access your s via injected script (in salesforce app) to modify it, because the text 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)

[@AlbaRivasSalesforce]

Hello, glad you find it useful! You have a longer explanation here: kzbin.info/www/bejne/imiyeHeDh9OdipY. Know that you can enable individual components to use Light DOM instead, however that won't open base components. developer.salesforce.com/blogs/2023/10/demystifying-light-dom-and-its-use-cases

[@DmitriGoncharov]

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

[@aishmeenkaur9376]

, B.

[@vaishalidewangan1672]

very nice explanation.

[@SalesforceDevs]

Thanks for liking

[@TechleadConsulting]

Hola Elba, Great Explanation

[@SalesforceDevs]

Thank you! 😃

[@tophersymps]

Very well explained, thank you!

[@ramparkashkhara7875]

Very nice efforts we are happy.

[@liamhunt8542]

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

[@SalesforceUSA]

good video

[@siripurapukavya2120]

Short and Crisp content for a quick grasp. Thanks a lottt...!!!

[@jflowers45]

I really enjoyed how you started off with vanilla JavaScript and then brought it into the context of LWC. Very polished. Well done!

[@philippreich7302]

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

[@julianancizarhurtadotorres3619]

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

[@AlbaRivasSalesforce]

My bad - still older browsers don't support it and we need the polyfill - developer.salesforce.com/docs/component-library/documentation/en/lwc/lwc.get_started_supported_browsers

[@gurbantasingh6872]

.

[@theartist8835]

you can use document.body to query the body element.

[@AlbaRivasSalesforce]

What I showcase in the video is how to query elements that belong to a shadow DOM tree (you have to query them using the shadowRoot property) vs elements that belong to the light DOM. "body" belongs to the light DOM, so you can query it normally. The shadow DOM tree in this example is attached to the div element I create (which is a child of body).

[@viggie007]

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?

[@AlbaRivasSalesforce]

I think in your case Light DOM should help developer.salesforce.com/docs/component-library/documentation/en/lwc/lwc.create_light_dom

[@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

[@AlbaRivasSalesforce]

That's because we do need to support older browsers (for now), developer.salesforce.com/docs/component-library/documentation/en/lwc/lwc.get_started_supported_browsers but if you use LWC outside of the platform, you can use the native one

[@yveromeev]

​@@AlbaRivasSalesforce Does it mean that LWC is going to use the native shadow dom in Salesforce in future? If yes, does Salesforce understands that it will break tons of legacy code that hacks the current shadow dom implementation via static resources and manual dom css injections? There are lots of cases where it's required to extend/shorten the standard components like input-field or datatable which are very difficult to re-implement for a little style change. For instance: there is a need to make the textarea higher than it is by default... or hide the clip/wrap arrows in the datatable Another question is: in that case how are the standard components going to follow SLDS stylesheet which is supposed to be acceptable for the light dom only?

[@AlbaRivasSalesforce]

​@@yveromeev yes, we know, and we are working on a plan for this. We are evaluating how we want to approach it. Regarding styling of base components, we've recently published www.lightningdesignsystem.com/platforms/lightning/styling-hooks/ (beta), that may help.

[@selvaraj8112]

Ity to úo9976746867

[@Khriztopher6220]

what is the use case scenario of Shadow DOM?

[@AlbaRivasSalesforce]

It's implemented in LWC, the web components framework that we use at Salesforce, to prevent other vendor components to access yours. See a more detailed explanation here --> kzbin.info/www/bejne/imiyeHeDh9OdipY

[@gabrielmayta2297]

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

[@AlbaRivasSalesforce]

No, it's not possible, as it's one of the standards in which web components are based and we enforce it, as it provides the encapsulation capabilities that will make your code robust, trustful and reusable.

[@aBhIsHeKsInGh-tl4gs]

@@AlbaRivasSalesforce यरयय

[@aakashsathe9309]

@@AlbaRivasSalesforce 1+.🤪🤪🤪🤪🤪🤪🤪🤣

[@doncasanada3413]

7

[@amnairfan7926]

M

[@lmkcolassi.9389]

Should you have referred LIGHT DOM as ROOT DOM instead ?

[@AlbaRivasSalesforce]

AFAIK it's known as Light DOM javascript.works-hub.com/learn/web-components-api-shadow-dom-and-light-dom-e18b6

[@rahuljawale4461]

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

[@AlbaRivasSalesforce]

Cascaded values are not, only inherited ones. This is what the shadow boundary prevents. See a more advanced session here: kzbin.info/www/bejne/imiyeHeDh9OdipY

[@marcc1179]

thanks!

[@naveenkothuri380]

Mam can u plz explain the working underhood where events are used

[@AlbaRivasSalesforce]

I'll create another video about shadow DOM and events soon. Meanwhile, you can take a look at developer.salesforce.com/docs/component-library/documentation/en/lwc/lwc.events_propagation, where it's very well explained how to configure events to bubble & escape the shadow DOM if needed.

[@krushnachandranayak8833]

\l22w2

[@kultttemo]

Why did you delete the comments? I see a lot of dislikes and I want to know why people complain. It is obvious there is wrong information in this video. I am not gonna watch it now.

[@AlbaRivasSalesforce]

not sure what you mean, I think we haven't deleted any comments :) if you have any concrete questions about shadow DOM of the video feel free to ask them, I'll be happy to answer

[@kultttemo]

@@AlbaRivasSalesforce Nevermind, I had a bad day. Thanks for your videos.

[@baddu88]

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

[@AlbaRivasSalesforce]

Yes, any markup inside a component template (its html file) will belong to the component shadow DOM and will be encapsulated - which all the benefits that this implies

[@عادلالشعلانالغامدي]

شاهي بالانجليزي تي قال الله تعالى ((فَهَلْ يَنظُرُونَ إِلَّا السَّاعَةَ أَن تَأْتِيَهُم بَغْتَةً ۖ فَقَدْ جَاءَ أَشْرَاطُهَا ۚ فَأَنَّىٰ لَهُمْ إِذَا جَاءَتْهُمْ ذِكْرَاهُمْ (18)

[@rizwanashekhrizwana3507]

Mai aapka fan hu I am altashar sheikh I love this your video's please aap doody man ki aur video's Nikal sakte hai please

[@Overthought7]

This video is sorely lacking an explanation of the purpose and/or use cases of a shadow DOM!

[@SalesforceUSA]

I have 11 Salesforce Certifications. Is it enough?

[@AlbaRivasSalesforce]

It's not a matter of the number of certifications that you have, but your abilities to apply your knowledge and soft skills! certifications are going to help you learn though :)

[@meenamehta365]

Very good.god bless you.

[@ironajijiul]

I love you ma'am thanks for this question

[@baddu88]

Any real world use case for this in lwc context

[@AlbaRivasSalesforce]

You're using shadow DOM implicitly in every LWC you create. Example: when you build LWCs, you sometimes will have to query the DOM - for example, you may want to look for a button and click on it calling its click() method. To do that, you'll have to query the component shadow DOM, (element.template.querySelector(...)), and not the component DOM (element.querySelector()), which is what you normally do in non-web components HTML. This provides the encapsulation benefits mentioned above. For instance, let's say that you download a component from the app exchange, and you include the component into another component you have built. You write some CSS styles for your component's background-color. Without having shadow DOM, those styles could leak into the 3rd party component, because of CSS cascading - which is something we probably want to avoid. But with shadow DOM, the 3rd party component will remain unchanged and protected from external modifications. Also, you have the control to decide which events escape the shadow boundary of the components that you create - having a higher degree of control of what you expose to the outside world. I'll do another video about how events behave with shadow DOM soon :)

[@baddu88]

@@AlbaRivasSalesforce thank you very much for detailed explanation

[@ovidodabay3746]

Oùuù