3

The LWC synthetic shadow dom doesn't seem to handle slots like the native shadow dom implementation e.g.

Let's say you start with a element:

<hello-there><h1>Hi there</h1></hello-there>

Then you attach the shadow dom and add a slot, the h1 will be slotted:

Normal shadow dom

Now if you do the same while running "@lwc/synthetic-shadow": "^1.1.1"

You get:

synthetic shadow dom

Interestingly it also looks like it moved the light dom into the synthetic shadow root. Is there a function I should call to get the slots to behave correctly? or some sort of ordering?

Supersharp
  • 29,002
  • 9
  • 92
  • 134
DavidLBatey
  • 312
  • 3
  • 8
  • I don't really understand the difference with your other question https://stackoverflow.com/a/55732661/4600982 – Supersharp Dec 09 '19 at 21:57
  • Thanks @Supersharp - The other question. I didn't know that SF was using a synthetic shadow dom (which I now do thanks to your answer). My new question is around the implementation of the slots. You can see above that the synthetic shadow dom doesn't function the same when it comes to slots and I was wondering if there's a way to make it behave like the native shadow dom (so slot the elements in what would be the light dom) – DavidLBatey Dec 09 '19 at 22:22

1 Answers1

2

Unfortunately the "synthetic Shadow DOM" is a polyfill that cannot exactly mimic the behavior of a real (native) Shadow DOM (like css encapsulation... or slotting).

That's why the <slot> element appears in the light DOM:

  • actually there's no Shadow DOM (no #shadow-root in the console)
  • the shadowRoot property is then a fake property that redirects to a Document Fragment (see #document-fragment instead of #shadow-root in the console) that's appended to the light DOM.
Supersharp
  • 29,002
  • 9
  • 92
  • 134
  • Thanks @supersharp - It's interesting because the LWC components have slots which you can see once rendered with the content slotted in. I guess the content inserted into them is being handled by the template rendering? Do you know any good pollyfills/work arounds if I want the slotting to work with the synthetic shadow dom? – DavidLBatey Dec 10 '19 at 14:36
  • Yes the Shadow DOM content is moved to the light DOM and the slot elements are replaced by the *slotted* content (to mimic the real Shadow DOM behavior). On LWC Shadow DOM I know only the officiel doc https://developer.salesforce.com/docs/component-library/documentation/lwc/create_dom but I suppose you know it. On the Shadow DOM in general you should read https://developers.google.com/web/fundamentals/web-components/shadowdom and the answers tagges [shadow-dom] on SO – Supersharp Dec 10 '19 at 17:02
  • 1
    Thanks @Supersharp - Let me know if you're available for freelance work/consulting? We have some interesting challenges to fix... – DavidLBatey Dec 10 '19 at 20:01