question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[ssr] Consider supporting `HTMLElement.shadowRoot` in SSR dom-shim.

See original GitHub issue

Description

I noticed today that the default dom-shim in @lit-labs/ssr does not implement the HTMLElement.shadowRoot property. Specifically, invoking attachShadow() with an open shadow-root configuration does not cause the created shadow root for the element to be exposed from the shadowRoot property; it only returns the shadow root object.

I know that you’re trying to keep the dom-shim lean, but I was wondering if you would consider a PR that implements the shadow root getter behavior.

For context, I’m working on FAST’s SSR implementation. We’re hoping to align to the same dom-shim constraints as Lit, however, FAST only caches shadow root references for elements defined with a closed shadow root. In open shadow root cases, the shadow root will simply be retrieved from the element’s shadowRoot property anytime the shadow root needs to be manipulated or inspected. This is currently causing a core code path to throw.

I’m sure we can adjust our runtime or dom-shim code to accommodate this gap, but I thought I would file an issue with ya’ll first to see if this is a feature you’re interested in taking. I’m happy to put up a PR if it is.

Issue Analytics

  • State:closed
  • Created a year ago
  • Comments:5 (5 by maintainers)

github_iconTop GitHub Comments

1reaction
nicholasricecommented, Mar 23, 2022

Great, I’ll put up a PR then. Thanks!

0reactions
kevinpschaafcommented, Mar 23, 2022

Yeah, if it’s just a matter of assigning the faux shadowRoot to this.shadowRoot, seems fine.

    attachShadow() {
      this.shadowRoot = {host: this};
      return this.shadowRoot;
    }

Want to be pragmatic about enabling common patterns without being super strict or heavyweight.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Server-Side Rendering (SSR) API · Issue #7 - GitHub
This is a proposal to get the ball rolling and discuss, in no way I think this is the perfect solution. Define a...
Read more >
@lit-async/ssr - npm Package Health Analysis | Snyk
We expect that the foundational SSR support in this package will support a wide variety of use cases, from full-blown app rendering ...
Read more >
SSR with Web Components. Rendering Shadow DOM and ...
This function takes an object that exposed the includeShadowRoots property. const html = await page.$eval('html', (element) => { return element.
Read more >
Declarative Shadow DOM - web.dev
Declarative Shadow DOM is a new way to implement and use Shadow DOM directly in HTML.
Read more >
Web Components in Server-Side Rendered (SSR) and Static ...
For any custom web component that has a shadow root attached to it, we will use the Declarative Shadow DOM so that the...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found