[@lit-labs/ssr] Implement HTMLElement.shadowRoot #2662
Conversation
🦋 Changeset detectedLatest commit: 7f2e51a The changes in this PR will be included in the next version bump. Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
|
Thanks for your pull request! It looks like this may be your first contribution to a Google open source project. Before we can look at your pull request, you'll need to sign a Contributor License Agreement (CLA). For more information, open the CLA check for this pull request. |
| } | ||
| attachShadow() { | ||
| return {host: this}; | ||
| attachShadow(init?: ShadowRootInit) { |
There was a problem hiding this comment.
I've added this init configuration as an optional param because I believe this would technically be a breaking change if it were required, even though the platform requires the init argument. I'm happy to update this to align with the platform if that is preferred.
There was a problem hiding this comment.
I think we should probably just make it required, to match the platform. It seems like it would be unusual to be calling this method only in an SSR context -- it will usually be called by a library that is already web compatible. So I think we can make it required without issuing a breaking change.
There was a problem hiding this comment.
Done. I'll leave this thread open so it's easier to find for other reviewers, in case they have thoughts.
| } | ||
| attachShadow() { | ||
| return {host: this}; | ||
| attachShadow(init?: ShadowRootInit) { |
There was a problem hiding this comment.
I think we should probably just make it required, to match the platform. It seems like it would be unusual to be calling this method only in an SSR context -- it will usually be called by a library that is already web compatible. So I think we can make it required without issuing a breaking change.
| value, | ||
| })); | ||
| } | ||
| #shadowRoot: null | ShadowRoot = null; |
There was a problem hiding this comment.
I'm inclined to use private _shadowRoot here, because AFAIK we haven't been using native class fields anywhere in our code base so far. And since we're targeting ES2020 still, the output is a little gnarly (https://www.typescriptlang.org/play?target=7#code/MYGwhgzhAEBmD29oG8CwAoa0DEAjMATtALzQB2AriCANwYZYLwAUAlCg1tAQKYAuFAmWh8AFgEsIAOjyE6maAF8MioA).
@justinfagnani WDYT about starting to use native class fields in our tools?
There was a problem hiding this comment.
Sure thing, renamed.
Please run
Please read and sign the Google CLA (if you agree!), see https://github.com/lit/lit/pull/2662/checks?check_run_id=5668663752 for details. |
Co-authored-by: Alexander Marks <[email protected]>
Co-authored-by: Alexander Marks <[email protected]>
|
Thanks for the PR! |
This PR implements a public readonly property,
shadowRoot, on theHTMLElementclass defined in the dom-shim. This property will evaluate to the object created and returned byattachShadow()whenattachShadow()is invoked with an open shadow root mode (host.attachShadow({mode: "open"}). Otherwise,shadowRootwill evaluate tonull. This behavior is intended to match the DOM behavior defined here.Let me know if changes are need; I'm happy to make any updates. I've also added one question inline that should probably get attention before merging. Thanks in advance!
Fixes #2652