[SalesForce] Understanding shadow dom in Lightning web components

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?

Best Answer

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).

Related Topic