9

I'm looking at the shadow Dom in the lwc developer guide and found below statements.

  1. Shadow DOM is a web standard. To make development easier for component authors, the Lightning Web Components shadow DOM works a bit differently than the web standard.One difference is that the shadow DOM for a Lightning web component is created automatically. The component author doesn’t have to implement it (no need to use the attachShadow() or appendChild() methods). Also, a Lightning web component’s shadow DOM works even on platforms that don’t natively support shadow DOM, such as some web browsers.

  2. Since Lightning web components don’t use the native shadow DOM yet, you can’t view their shadow DOM in Chrome Developer Tools. Even if you enable Show user agent shadow DOM, you don’t see the shadow DOM.

My Question: Is shadow dom in lwc used just to encapsulate framework methods? Also is there anything a developer need to keep in mind while working with lwc in terms of shadow Dom?

11

The Shadow DOM have three primary effects: DOM access, CSS isolation, and event propagation. LWC components are "first-class" DOM elements. Whenever you're outside the component, you see the component itself instead of its internals or nothing at all (null).

Events

Events now only go up to a Shadow DOM boundary by default, except for "onevent" handlers. This means that events propagate faster by default. You can choose to control the behavior, though. Also, event.target, which could sometimes be either null when outside the component, now returns the component itself as the target in these situations.

CSS

CSS outside the component can now only affect the top-level of the component. This is not the same as Aura, where you could affect internals with CSS. CSS cannot affect parent, child, or sibling CSS. It is completely isolated, which allows a component to appear as the developer intended regardless of what anyone else might do to that component. You can still style the component itself (e.g. put a border around it), and you do so by specifying the component's actual name. Taken from the documentation:

c-child {
    display: block;
    border: 2px solid red;
}

This styles c-child with a block display mode and a solid border of red.

You can respond to class names, though, through the new :host syntax:

:host(.active) {
  background-color: lightgreen; 
} 

Whenever the "active" class is applied to your component, then it changes to light green. The component itself defines how classes can affect it, rather than having the parent force its styles on its children.

DOM

This should be of no surprise, but you can't use things like document.querySelector to find elements outside of your own Shadow DOM. This includes trying to finding elements in parent, sibling, or child components. There is a way to do composition, which is done through <slot> elements. This is similar to Aura's Aura.Component[] and Visualforce's apex:composition.


There's quite a bit more to this, so I suggest you read the Developer Documentation for more details (currently requires a Spring 19 org).

  • Thanks for putting everything in place. I know there is lot to cover in short timeframe. what would be the case of component being null when we're outside the component? – codeyinthecloud Dec 15 '18 at 23:58
  • 1
    @codeyinthecloud In Aura, <span onclick="{!c.handleClick}"><lightning:input .../></span>, event.target would typically be null. In LWC, it returns the correct <lightning-input> instead. – sfdcfox Dec 16 '18 at 0:09
  • The LWC Developer Guide is available here: developer.salesforce.com/docs/component-library/documentation/… – bonehelmet Jan 22 at 21:13
  • @sfdcfox Some of your answer seems to be inaccurate. Specifically - I tried using document.querySelectorAll and it is able to find elements inside Lightning shadow-dom components. Are you aware of this? Is this on purpose or a side effect of an imperfect polyfill? Is there any plan to change the polyfill to a native shadow-dom implementation in the future? Thanks! – Malki May 21 at 13:49
  • @Malki Not sure how I missed your comment, but... yes, the polyfill is likely to blame. Doing that on a modern browser now appears to have correct behavior (but I presume it definitely will be fixed in the future if it hasn't already). – sfdcfox Oct 11 at 22:30

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.