Merge pull request #6 from nolanlawson/shadowrootmode

quatico-solutions · Aug 10, 2024 · d7d0b1e · d7d0b1e
2 parents 364b2ad + 213c713
commit d7d0b1e
Show file tree

Hide file tree

Showing 5 changed files with 27 additions and 27 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -1,3 +1,3 @@
 {
-    "cSpell.words": ["shadowroot"]
+    "cSpell.words": ["shadowrootmode"]
 }
diff --git a/src/renderElement.spec.ts b/src/renderElement.spec.ts
@@ -76,7 +76,7 @@ describe("renderElement()", () => {
 
         expect(actual).toMatchInlineSnapshot(`
 "<div>
-    <template shadowroot="open">
+    <template shadowrootmode="open">
         <p>
             inside
         </p>

diff --git a/src/renderShadowContent.spec.ts b/src/renderShadowContent.spec.ts
@@ -13,7 +13,7 @@ describe("renderShadowContent", () => {
         const actual = renderShadowContent(target, { indent: "" });
 
         expect(actual).toMatchInlineSnapshot(`
-"    <template shadowroot="open">
+"    <template shadowrootmode="open">
 EXPECTED
     </template>"
 `);
@@ -25,7 +25,7 @@ EXPECTED
         const actual = renderShadowContent(target, { indent: "", shadowRoots: "declarative" });
 
         expect(actual).toMatchInlineSnapshot(`
-"    <template shadowroot="open">
+"    <template shadowrootmode="open">
 EXPECTED
     </template>"
 `);

diff --git a/src/renderShadowContent.ts b/src/renderShadowContent.ts
@@ -18,5 +18,5 @@ export const renderShadowContent = (
     if (shadowRoots === "devtools") {
         return `${indent + INDENTATION}#shadowRoot\n${element}`;
     }
-    return `${indent + INDENTATION}<template shadowroot="open">\n${element}\n${indent + INDENTATION}</template>`;
+    return `${indent + INDENTATION}<template shadowrootmode="open">\n${element}\n${indent + INDENTATION}</template>`;
 };
diff --git a/src/renderToString.spec.ts b/src/renderToString.spec.ts
@@ -23,7 +23,7 @@ describe("renderToString()", () => {
 
         expect(actual).toMatchInlineSnapshot(`
 "<div>
-    <template shadowroot="open">
+    <template shadowrootmode="open">
         <p>
             inside
         </p>
@@ -45,7 +45,7 @@ describe("renderToString()", () => {
 
         expect(actual).toMatchInlineSnapshot(`
 "<div>
-    <template shadowroot="open">
+    <template shadowrootmode="open">
         <input 
             aria-required="true"
             id="name"
@@ -68,7 +68,7 @@ describe("renderToString()", () => {
 
         expect(actual).toMatchInlineSnapshot(`
 "<div>
-    <template shadowroot="open">
+    <template shadowrootmode="open">
         <br />
     </template>
 </div>"
@@ -94,7 +94,7 @@ describe("renderToString()", () => {
 
         expect(actual).toMatchInlineSnapshot(`
 "<div>
-    <template shadowroot="open">
+    <template shadowrootmode="open">
         <a 
             class="link link--display-inline-block link--bg"
             href="expectedUrl"
@@ -119,12 +119,12 @@ describe("renderToString()", () => {
 
         expect(actual).toMatchInlineSnapshot(`
 "<div>
-    <template shadowroot="open">
+    <template shadowrootmode="open">
         <p>
             inside
         </p>
         <div>
-            <template shadowroot="open">
+            <template shadowrootmode="open">
                 <button>
                     click me I'm inside of a second root
                 </button>
@@ -142,7 +142,7 @@ describe("renderToString()", () => {
 
         expect(actual).toMatchInlineSnapshot(`
 "<div>
-    <template shadowroot="open">
+    <template shadowrootmode="open">
         <p>
             inside
         </p>
@@ -192,7 +192,7 @@ describe("renderToString()", () => {
 
         expect(actual).toMatchInlineSnapshot(`
 "<div>
-    <template shadowroot="open">
+    <template shadowrootmode="open">
         <p>
             inside
         </p>
@@ -353,7 +353,7 @@ describe("render w/ slottedContent map-contents", () => {
 
         expect(actual).toMatchInlineSnapshot(`
 "<host-element>
-    <template shadowroot="open">
+    <template shadowrootmode="open">
         <slot>
             <p>
                 EXPECTED
@@ -377,7 +377,7 @@ describe("render w/ slottedContent map-contents", () => {
 
         expect(actual).toMatchInlineSnapshot(`
 "<host-element>
-    <template shadowroot="open">
+    <template shadowrootmode="open">
         <slot name="target">
             #contents
                 <p slot="target">
@@ -399,7 +399,7 @@ describe("render w/ slottedContent map-contents", () => {
 
         expect(actual).toMatchInlineSnapshot(`
 "<host-element>
-    <template shadowroot="open">
+    <template shadowrootmode="open">
         <slot>
             #contents
                 <p>
@@ -424,7 +424,7 @@ describe("render w/ slottedContent map-contents", () => {
 
         expect(actual).toMatchInlineSnapshot(`
 "<host-element>
-    <template shadowroot="open">
+    <template shadowrootmode="open">
         <slot>
             #contents
                 <div>
@@ -452,7 +452,7 @@ describe("render w/ slottedContent map-contents", () => {
 
         expect(actual).toMatchInlineSnapshot(`
 "<host-element>
-    <template shadowroot="open">
+    <template shadowrootmode="open">
         <slot>
             #contents
                 <slot></slot>
@@ -474,9 +474,9 @@ describe("render w/ slottedContent map-contents", () => {
 
         expect(actual).toMatchInlineSnapshot(`
 "<my-target>
-    <template shadowroot="open">
+    <template shadowrootmode="open">
         <host-element>
-            <template shadowroot="open">
+            <template shadowrootmode="open">
                 <slot>
                     #contents
                         <div>
@@ -507,7 +507,7 @@ describe("render w/ slottedContent reveal-contents", () => {
 
         expect(actual).toMatchInlineSnapshot(`
 "<host-element>
-    <template shadowroot="open">
+    <template shadowrootmode="open">
         <slot>
             <p>
                 EXPECTED
@@ -531,7 +531,7 @@ describe("render w/ slottedContent reveal-contents", () => {
 
         expect(actual).toMatchInlineSnapshot(`
 "<host-element>
-    <template shadowroot="open">
+    <template shadowrootmode="open">
         <slot name="target">
             #contents
                 <p slot="target">
@@ -556,7 +556,7 @@ describe("render w/ slottedContent reveal-contents", () => {
 
         expect(actual).toMatchInlineSnapshot(`
 "<host-element>
-    <template shadowroot="open">
+    <template shadowrootmode="open">
         <slot>
             #contents
                 <p>
@@ -584,7 +584,7 @@ describe("render w/ slottedContent reveal-contents", () => {
 
         expect(actual).toMatchInlineSnapshot(`
 "<host-element>
-    <template shadowroot="open">
+    <template shadowrootmode="open">
         <slot>
             #contents
                 <div>
@@ -621,7 +621,7 @@ describe("render w/ slottedContent reveal-contents", () => {
 
         expect(actual).toMatchInlineSnapshot(`
 "<host-element>
-    <template shadowroot="open">
+    <template shadowrootmode="open">
         <slot>
             #contents
                 <slot></slot>
@@ -644,9 +644,9 @@ describe("render w/ slottedContent reveal-contents", () => {
 
         expect(actual).toMatchInlineSnapshot(`
 "<my-target>
-    <template shadowroot="open">
+    <template shadowrootmode="open">
         <host-element>
-            <template shadowroot="open">
+            <template shadowrootmode="open">
                 <slot>
                     #contents
                         <div>
-Original file line number
+Diff line change
@@ Expand Up / @@ -76,7 +76,7 @@ describe("renderElement()", () => { @@
             expect(actual).toMatchInlineSnapshot(`
     "<div>
-        <template shadowroot="open">
+        <template shadowrootmode="open">
             <p>
                 inside
             </p>
@@ Expand Down @@