Update SSR and hydrate-support to use const prefix

packages/labs/ssr/src/lib/lit-element-renderer.ts

@@ -7,7 +7,10 @@
 import {ElementRenderer} from './element-renderer.js';
 import {LitElement, CSSResult, ReactiveElement} from 'lit';
 import {_$LE} from 'lit-element/private-ssr-support.js';
-import {ariaMixinEnum} from '@lit-labs/ssr-dom-shim/element-internals.js';
+import {
+  ariaMixinEnum,
+  HYDRATE_INTERNALS_ATTR_PREFIX,
+} from '@lit-labs/ssr-dom-shim';
 import {renderValue} from './render-value.js';
 import type {RenderInfo} from './render-value.js';
 import type {RenderResult} from './render-result.js';
@@ -31,30 +34,25 @@ export class LitElementRenderer extends ElementRenderer {
     super(tagName);
     this.element = new (customElements.get(this.tagName)!)() as LitElement;
 
-    /**
-     * Reflect internals AOM attributes back to the DOM prior to hydration
-     * to ensure search bots can accurately parse element semantics prior
-     * to hydration. This is called whenever an instance of ElementInternals
-     * is created on an element to wire up the getters/setters
-     * for the AriaMixin properties
-     *
-     * TODO - Determine the proper way to hydrate any attributes set by the shim
-     * and remove these when the element is fully rendered
-     */
+    // Reflect internals AOM attributes back to the DOM prior to hydration to
+    // ensure search bots can accurately parse element semantics prior to
+    // hydration. This is called whenever an instance of ElementInternals is
+    // created on an element to wire up the getters/setters for the ARIAMixin
+    // properties.
     const internals = (
       this.element as object as {__internals: ElementInternals}
     ).__internals;
     if (internals) {
       for (const [key, value] of Object.entries(internals)) {
-        const ariaAttribute = ariaMixinEnum[key];
+        const ariaAttribute = ariaMixinEnum[key as keyof ARIAMixin];
         if (
           ariaAttribute &&
           value &&
           !this.element.hasAttribute(ariaAttribute)
         ) {
           this.element.setAttribute(ariaAttribute, value);
           this.element.setAttribute(
-            `hydrate-internals-${ariaAttribute}`,
+            `${HYDRATE_INTERNALS_ATTR_PREFIX}${ariaAttribute}`,
             value
           );
         }

packages/lit-element/package.json

@@ -255,6 +255,7 @@
     "!/development/test/"
   ],
   "dependencies": {
+    "@lit-labs/ssr-dom-shim": "^1.0.0",
     "@lit/reactive-element": "^1.3.0",
     "lit-html": "^2.2.0"
   },

packages/lit-element/src/experimental-hydrate-support.ts

@@ -13,6 +13,7 @@
 import type {PropertyValues} from '@lit/reactive-element';
 import {render, RenderOptions} from 'lit-html';
 import {hydrate} from 'lit-html/experimental-hydrate.js';
+import {HYDRATE_INTERNALS_ATTR_PREFIX} from '@lit-labs/ssr-dom-shim';
 
 interface PatchableLitElement extends HTMLElement {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/no-misused-new
@@ -96,11 +97,12 @@ globalThis.litElementHydrateSupport = ({
     if (this._$needsHydration) {
       this._$needsHydration = false;
       // Remove aria attributes added by internals shim during SSR
-      // TODO(augustjk) Prefix should probably be an exported const
       for (let i = 0; i < this.attributes.length; i++) {
         const attr = this.attributes[i];
-        if (attr.name.startsWith('hydrate-internals-')) {
-          const ariaAttr = attr.name.slice('hydrate-internals-'.length);
+        if (attr.name.startsWith(HYDRATE_INTERNALS_ATTR_PREFIX)) {
+          const ariaAttr = attr.name.slice(
+            HYDRATE_INTERNALS_ATTR_PREFIX.length
+          );
           this.removeAttribute(ariaAttr);
           this.removeAttribute(attr.name);
         }