@lion/ui 0.23.0 → 0.24.0

package/components/overlays/test/utils-tests/active-element.test.js

@@ -1,7 +1,6 @@
 import { expect, fixture, defineCE } from '@open-wc/testing';
 import { LitElement, html } from 'lit';
 import { getDeepActiveElement } from '@lion/ui/overlays.js';
-
 describe('getDeepActiveElement()', () => {
   it('handles document level active elements', async () => {
     const element = await fixture(`
@@ -11,21 +10,16 @@ describe('getDeepActiveElement()', () => {
         <input id="el-3">
       </div>
     `);
-
-    const el1 = /** @type {HTMLElement} */ (element.querySelector('#el-1'));
-    const el2 = /** @type {HTMLElement} */ (element.querySelector('#el-2'));
-    const el3 = /** @type {HTMLElement} */ (element.querySelector('#el-3'));
-
+    const el1 = /** @type {HTMLElement} */ element.querySelector('#el-1');
+    const el2 = /** @type {HTMLElement} */ element.querySelector('#el-2');
+    const el3 = /** @type {HTMLElement} */ element.querySelector('#el-3');
     el1.focus();
     expect(getDeepActiveElement()).to.eql(el1);
-
     el2.focus();
     expect(getDeepActiveElement()).to.eql(el2);
-
     el3.focus();
     expect(getDeepActiveElement()).to.eql(el3);
   });
-
   it('handles active element inside shadowroots', async () => {
     const elNestedTag = defineCE(
       class extends LitElement {
@@ -37,7 +31,6 @@ describe('getDeepActiveElement()', () => {
         }
       },
     );
-
     const elTag = defineCE(
       class extends LitElement {
         render() {
@@ -50,37 +43,29 @@ describe('getDeepActiveElement()', () => {
         }
       },
     );
-
     const element = await fixture(`
       <div>
         <${elTag}></${elTag}>
         <button id="el-1">Button</button>
       </div>
     `);
-
-    const elTagEl = /** @type {HTMLElement} */ (element.querySelector(elTag));
-    const elA = /** @type {ShadowRoot} */ (elTagEl.shadowRoot);
-    const elNestedTagEl = /** @type {HTMLElement} */ (elA.querySelector(elNestedTag));
-    const elB = /** @type {ShadowRoot} */ (elNestedTagEl.shadowRoot);
-
-    const elA1 = /** @type {HTMLElement} */ (elA.querySelector('#el-a-1'));
-    const elA2 = /** @type {HTMLElement} */ (elA.querySelector('#el-a-2'));
-    const elB1 = /** @type {HTMLElement} */ (elB.querySelector('#el-b-1'));
-    const elB2 = /** @type {HTMLElement} */ (elB.querySelector('#el-b-1'));
-    const el1 = /** @type {HTMLElement} */ (element.querySelector('#el-1'));
-
+    const elTagEl = /** @type {HTMLElement} */ element.querySelector(elTag);
+    const elA = /** @type {ShadowRoot} */ elTagEl.shadowRoot;
+    const elNestedTagEl = /** @type {HTMLElement} */ elA.querySelector(elNestedTag);
+    const elB = /** @type {ShadowRoot} */ elNestedTagEl.shadowRoot;
+    const elA1 = /** @type {HTMLElement} */ elA.querySelector('#el-a-1');
+    const elA2 = /** @type {HTMLElement} */ elA.querySelector('#el-a-2');
+    const elB1 = /** @type {HTMLElement} */ elB.querySelector('#el-b-1');
+    const elB2 = /** @type {HTMLElement} */ elB.querySelector('#el-b-1');
+    const el1 = /** @type {HTMLElement} */ element.querySelector('#el-1');
     elA1.focus();
     expect(getDeepActiveElement()).to.eql(elA1);
-
     elA2.focus();
     expect(getDeepActiveElement()).to.eql(elA2);
-
     elB1.focus();
     expect(getDeepActiveElement()).to.eql(elB1);
-
     elB2.focus();
     expect(getDeepActiveElement()).to.eql(elB2);
-
     el1.focus();
     expect(getDeepActiveElement()).to.eql(el1);
   });

package/components/overlays/test/utils-tests/adopt-styles.test.js

@@ -9,89 +9,73 @@ import {
   _adoptStyleUtils,
 } from '../../src/utils/adopt-styles.js';
 import { createShadowHost } from '../../test-helpers/createShadowHost.js';
-
 function mockNoSupportAdoptedStylesheets() {
   _adoptStyleUtils.supportsAdoptingStyleSheets = false;
 }
-
 function restoreMockNoSupportAdoptedStylesheets() {
   _adoptStyleUtils.supportsAdoptingStyleSheets = true;
 }
-
 describe('adoptStyle()', () => {
   it('adds a stylesheet from a CSSResult to the shadowRoot', async () => {
     const { shadowHost, cleanupShadowHost } = createShadowHost();
     const myCssResult = css``;
-    const root = /** @type {ShadowRoot} */ (shadowHost.shadowRoot);
-
+    const root = /** @type {ShadowRoot} */ shadowHost.shadowRoot;
     adoptStyle(root, myCssResult);
     expect(root.adoptedStyleSheets).to.include(myCssResult.styleSheet);
-
     cleanupShadowHost();
   });
-
   it('adds a stylesheet from a CSSStyleSheet to the shadowRoot', async () => {
     const { shadowHost, cleanupShadowHost } = createShadowHost();
     const myCSSStyleSheet = new CSSStyleSheet();
-    const root = /** @type {ShadowRoot} */ (shadowHost.shadowRoot);
-
+    const root = /** @type {ShadowRoot} */ shadowHost.shadowRoot;
     adoptStyle(root, myCSSStyleSheet);
     expect(root.adoptedStyleSheets).to.include(myCSSStyleSheet);
-
     cleanupShadowHost();
   });
-
   it('does not add same stylesheet twice', async () => {
     const { shadowHost, cleanupShadowHost } = createShadowHost();
     const myCssResult = css``;
-    const root = /** @type {ShadowRoot} */ (shadowHost.shadowRoot);
-
+    const root = /** @type {ShadowRoot} */ shadowHost.shadowRoot;
     adoptStyle(root, myCssResult);
     const amountOfStylesheetsAfterOneInit = root.adoptedStyleSheets.length;
     adoptStyle(root, myCssResult);
     expect(root.adoptedStyleSheets.length).to.equal(amountOfStylesheetsAfterOneInit);
-
     cleanupShadowHost();
   });
-
   it('works as well when document is the root', async () => {
     const myCssResult = css``;
     const root = document;
-
     adoptStyle(root, myCssResult);
     expect(root.adoptedStyleSheets).to.include(myCssResult.styleSheet);
   });
-
   describe('Teardown', () => {
     it('removes stylesheets from the shadowRoot', async () => {
       const { shadowHost, cleanupShadowHost } = createShadowHost();
       const myCssResult = css``;
-      const root = /** @type {ShadowRoot} */ (shadowHost.shadowRoot);
-
+      const root = /** @type {ShadowRoot} */ shadowHost.shadowRoot;
       adoptStyle(root, myCssResult);
       expect(root.adoptedStyleSheets).to.include(myCssResult.styleSheet);
-      adoptStyle(root, myCssResult, { teardown: true });
+      adoptStyle(root, myCssResult, {
+        teardown: true,
+      });
       expect(root.adoptedStyleSheets).to.not.include(myCssResult.styleSheet);
-
       const myCSSStyleSheet = new CSSStyleSheet();
       adoptStyle(root, myCSSStyleSheet);
       expect(root.adoptedStyleSheets).to.include(myCSSStyleSheet);
-      adoptStyle(root, myCSSStyleSheet, { teardown: true });
+      adoptStyle(root, myCSSStyleSheet, {
+        teardown: true,
+      });
       expect(root.adoptedStyleSheets).to.not.include(myCSSStyleSheet);
-
       cleanupShadowHost();
     });
   });
-
   describe('Fallback when adoptedStyleSheets are not supported', () => {
     beforeEach(() => {
       mockNoSupportAdoptedStylesheets();
     });
-
     afterEach(() => {
       restoreMockNoSupportAdoptedStylesheets();
     });
-
     it('adds a "traditional" stylesheet to the shadowRoot', async () => {
       const { shadowHost, cleanupShadowHost } = createShadowHost();
       const myCssResult = css`
@@ -99,19 +83,15 @@ describe('adoptStyle()', () => {
           color: blue;
         }
       `;
-      const root = /** @type {ShadowRoot} */ (shadowHost.shadowRoot);
-
+      const root = /** @type {ShadowRoot} */ shadowHost.shadowRoot;
       adoptStyle(root, myCssResult);
       const sheets = Array.from(root.querySelectorAll('style'));
       const lastAddedSheet = sheets[sheets.length - 1];
       expect(lastAddedSheet.textContent).to.equal(myCssResult.cssText);
-
       cleanupShadowHost();
     });
-
     it('adds a "traditional" stylesheet to the body', async () => {
       mockNoSupportAdoptedStylesheets();
-
       const myCssResult = css`
         .check {
           color: blue;
@@ -119,13 +99,11 @@ describe('adoptStyle()', () => {
       `;
       const root = document;
       adoptStyle(root, myCssResult);
-
       const sheets = Array.from(document.body.querySelectorAll('style'));
       const lastAddedSheet = sheets[sheets.length - 1];
       expect(lastAddedSheet.textContent).to.equal(myCssResult.cssText);
       restoreMockNoSupportAdoptedStylesheets();
     });
-
     describe('Teardown', () => {
       it('removes a "traditional" stylesheet from the shadowRoot', async () => {
         const { shadowHost, cleanupShadowHost } = createShadowHost();
@@ -134,41 +112,39 @@ describe('adoptStyle()', () => {
             color: blue;
           }
         `;
-        const root = /** @type {ShadowRoot} */ (shadowHost.shadowRoot);
-
+        const root = /** @type {ShadowRoot} */ shadowHost.shadowRoot;
         adoptStyle(root, myCssResult);
         const sheets1 = Array.from(root.querySelectorAll('style'));
         const lastAddedSheet1 = sheets1[sheets1.length - 1];
         expect(lastAddedSheet1.textContent).to.equal(myCssResult.cssText);
-        adoptStyle(root, myCssResult, { teardown: true });
+        adoptStyle(root, myCssResult, {
+          teardown: true,
+        });
         const sheets2 = Array.from(root.querySelectorAll('style'));
         const lastAddedSheet2 = sheets2[sheets2.length - 1];
         expect(lastAddedSheet2?.textContent).to.not.equal(myCssResult.cssText);
-
         const myCSSStyleSheet = new CSSStyleSheet();
         myCSSStyleSheet.insertRule('.check { color: blue; }');
-
         adoptStyle(root, myCSSStyleSheet);
         const sheets3 = Array.from(root.querySelectorAll('style'));
         const lastAddedSheet3 = sheets3[sheets3.length - 1];
         expect(lastAddedSheet3.textContent).to.equal(
           serializeConstructableStylesheet(myCSSStyleSheet),
         );
-        adoptStyle(root, myCSSStyleSheet, { teardown: true });
+        adoptStyle(root, myCSSStyleSheet, {
+          teardown: true,
+        });
         const sheets4 = Array.from(root.querySelectorAll('style'));
         const lastAddedSheet4 = sheets4[sheets4.length - 1];
         expect(lastAddedSheet4?.textContent).to.not.equal(myCSSStyleSheet);
-
         cleanupShadowHost();
       });
     });
   });
 });
-
 describe('Fallback when IOS user opens overlay', () => {
   it('adds a "traditional" stylesheet to the body', async () => {
     const browserDetectionStub = sinon.stub(browserDetection, 'isIOS').value(true);
-
     const myCssResult = css`
       .check {
         color: blue;
@@ -176,62 +152,55 @@ describe('Fallback when IOS user opens overlay', () => {
     `;
     const root = document;
     adoptStyle(root, myCssResult);
-
     const sheets = Array.from(document.body.querySelectorAll('style'));
     const lastAddedSheet = sheets[sheets.length - 1];
     expect(lastAddedSheet.textContent).to.equal(myCssResult.cssText);
     browserDetectionStub.restore();
   });
-
   describe('Teardown', () => {
     it('removes a "traditional" stylesheet from the shadowRoot', async () => {
       const browserDetectionStub = sinon.stub(browserDetection, 'isIOS').value(true);
-
       const { shadowHost, cleanupShadowHost } = createShadowHost();
       const myCssResult = css`
         .check {
           color: blue;
         }
       `;
-      const root = /** @type {ShadowRoot} */ (shadowHost.shadowRoot);
-
+      const root = /** @type {ShadowRoot} */ shadowHost.shadowRoot;
       adoptStyle(root, myCssResult);
       const sheets1 = Array.from(root.querySelectorAll('style'));
       const lastAddedSheet1 = sheets1[sheets1.length - 1];
       expect(lastAddedSheet1.textContent).to.equal(myCssResult.cssText);
-      adoptStyle(root, myCssResult, { teardown: true });
+      adoptStyle(root, myCssResult, {
+        teardown: true,
+      });
       const sheets2 = Array.from(root.querySelectorAll('style'));
       const lastAddedSheet2 = sheets2[sheets2.length - 1];
       expect(lastAddedSheet2?.textContent).to.not.equal(myCssResult.cssText);
-
       const myCSSStyleSheet = new CSSStyleSheet();
       myCSSStyleSheet.insertRule('.check { color: blue; }');
-
       adoptStyle(root, myCSSStyleSheet);
       const sheets3 = Array.from(root.querySelectorAll('style'));
       const lastAddedSheet3 = sheets3[sheets3.length - 1];
       expect(lastAddedSheet3.textContent).to.equal(
         serializeConstructableStylesheet(myCSSStyleSheet),
       );
-      adoptStyle(root, myCSSStyleSheet, { teardown: true });
+      adoptStyle(root, myCSSStyleSheet, {
+        teardown: true,
+      });
       const sheets4 = Array.from(root.querySelectorAll('style'));
       const lastAddedSheet4 = sheets4[sheets4.length - 1];
       expect(lastAddedSheet4?.textContent).to.not.equal(myCSSStyleSheet);
-
       cleanupShadowHost();
-
       browserDetectionStub.restore();
     });
   });
 });
-
 describe('adoptStyles()', () => {
   it('calls "adoptStyle" for all entries in CSSResult|CSSStylesheet[]', async () => {
     const spy = sinon.spy(_adoptStyleUtils, 'adoptStyle');
-
     const myCssResult = css``;
     const myCSSStyleSheet = new CSSStyleSheet();
-
     adoptStyles(document, [myCssResult, myCSSStyleSheet]);
     expect(spy).to.have.been.calledTwice;
   });

package/components/overlays/test/utils-tests/deep-contains.test.js

@@ -1,28 +1,27 @@
 import { expect, fixture } from '@open-wc/testing';
 import { html } from 'lit';
-
 import { deepContains } from '@lion/ui/overlays.js';
-
 describe('deepContains()', () => {
   it('returns true if element contains a target element with a shadow boundary in between', async () => {
-    const shadowElement = /** @type {HTMLElement} */ (await fixture('<div id="shadow"></div>'));
-    const shadowRoot = shadowElement.attachShadow({ mode: 'open' });
+    const shadowElement = /** @type {HTMLElement} */ await fixture('<div id="shadow"></div>');
+    const shadowRoot = shadowElement.attachShadow({
+      mode: 'open',
+    });
     shadowRoot.innerHTML = `
       <button id="el-1">Button</button>
       <a id="el-2" href="#foo">Href</a>
       <input id="el-3">
     `;
-    const shadowElementChild = /** @type {HTMLElement} */ (shadowRoot.querySelector('#el-1'));
-    const element = /** @type {HTMLElement} */ (
+    const shadowElementChild = /** @type {HTMLElement} */ shadowRoot.querySelector('#el-1');
+    const element =
+      /** @type {HTMLElement} */
       await fixture(html`
         <div id="light">
           ${shadowElement}
           <button id="light-el-1">Button</button>
         </div>
-      `)
-    );
-    const lightChildEl = /** @type {HTMLElement} */ (element.querySelector('#light-el-1'));
-
+      `);
+    const lightChildEl = /** @type {HTMLElement} */ element.querySelector('#light-el-1');
     expect(deepContains(element, element)).to.be.true;
     expect(deepContains(element, shadowElement)).to.be.true;
     expect(deepContains(element, shadowElementChild)).to.be.true;
@@ -34,99 +33,96 @@ describe('deepContains()', () => {
     // Siblings
     expect(
       deepContains(
-        /** @type {HTMLElement} */ (element.firstElementChild),
-        /** @type {HTMLElement} */ (element.lastElementChild),
+        /** @type {HTMLElement} */ element.firstElementChild,
+        /** @type {HTMLElement} */ element.lastElementChild,
       ),
     ).to.be.false;
     // Unrelated
     expect(deepContains(lightChildEl, shadowElementChild)).to.be.false;
   });
-
   it('returns true if element contains a target element with a shadow boundary in between, for multiple shadowroots', async () => {
-    const shadowElement = /** @type {HTMLElement} */ (await fixture('<div id="shadow"></div>'));
-    const shadowRoot = shadowElement.attachShadow({ mode: 'open' });
+    const shadowElement = /** @type {HTMLElement} */ await fixture('<div id="shadow"></div>');
+    const shadowRoot = shadowElement.attachShadow({
+      mode: 'open',
+    });
     shadowRoot.innerHTML = `
       <button id="el-1">Button</button>
       <a id="el-2" href="#foo">Href</a>
       <input id="el-3">
     `;
-
-    const shadowElement2 = /** @type {HTMLElement} */ (await fixture('<div id="shadow2"></div>'));
-    const shadowRoot2 = shadowElement2.attachShadow({ mode: 'open' });
+    const shadowElement2 = /** @type {HTMLElement} */ await fixture('<div id="shadow2"></div>');
+    const shadowRoot2 = shadowElement2.attachShadow({
+      mode: 'open',
+    });
     shadowRoot2.innerHTML = `
       <button id="el-1">Button</button>
       <a id="el-2" href="#foo">Href</a>
       <input id="el-3">
     `;
-
-    const shadowElementChild = /** @type {HTMLElement} */ (shadowRoot.querySelector('#el-2'));
-    const shadowElementChild2 = /** @type {HTMLElement} */ (shadowRoot2.querySelector('#el-2'));
-    const element = /** @type {HTMLElement} */ (
+    const shadowElementChild = /** @type {HTMLElement} */ shadowRoot.querySelector('#el-2');
+    const shadowElementChild2 = /** @type {HTMLElement} */ shadowRoot2.querySelector('#el-2');
+    const element =
+      /** @type {HTMLElement} */
       await fixture(html`
         <div id="light">
           ${shadowElement} ${shadowElement2}
           <button id="light-el-1">Button</button>
         </div>
-      `)
-    );
-
+      `);
     expect(deepContains(element, shadowElementChild)).to.be.true;
     expect(deepContains(shadowElement, shadowElementChild)).to.be.true;
     expect(deepContains(shadowRoot, shadowElementChild)).to.be.true;
-
     expect(deepContains(element, shadowElementChild2)).to.be.true;
     expect(deepContains(shadowElement2, shadowElementChild2)).to.be.true;
     expect(deepContains(shadowRoot2, shadowElementChild2)).to.be.true;
   });
-
   it('can detect containing elements inside multiple nested shadow roots', async () => {
     const shadowNestedElement = await fixture('<div id="shadow-nested"></div>');
-    const shadowNestedRoot = shadowNestedElement.attachShadow({ mode: 'open' });
+    const shadowNestedRoot = shadowNestedElement.attachShadow({
+      mode: 'open',
+    });
     shadowNestedRoot.innerHTML = `
       <button id="nested-el-1">Button</button>
       <a id="nested-el-2" href="#foo">Href</a>
       <input id="nested-el-3">
     `;
-
-    const shadowElement = /** @type {HTMLElement} */ (await fixture('<div id="shadow"></div>'));
-    const shadowRoot = shadowElement.attachShadow({ mode: 'open' });
+    const shadowElement = /** @type {HTMLElement} */ await fixture('<div id="shadow"></div>');
+    const shadowRoot = shadowElement.attachShadow({
+      mode: 'open',
+    });
     shadowRoot.innerHTML = `
       <button id="el-1">Button</button>
 
       <input id="el-3">
     `;
     shadowRoot.insertBefore(shadowNestedElement, shadowRoot.lastElementChild);
-
-    const element = /** @type {HTMLElement} */ (
+    const element =
+      /** @type {HTMLElement} */
       await fixture(html`
         <div id="light">
           ${shadowElement}
           <button id="light-el-1">Button</button>
         </div>
-      `)
-    );
-
-    const elementFirstChild = /** @type {HTMLElement} */ (element.firstElementChild);
-    const elementFirstChildShadow = /** @type {ShadowRoot} */ (elementFirstChild.shadowRoot);
-    const elementFirstChildShadowChildren = /** @type {HTMLElement[]} */ (
-      Array.from(elementFirstChildShadow.children)
-    );
-    const elementFirstChildShadowChildShadow = /** @type {ShadowRoot} */ (
-      elementFirstChildShadowChildren[1].shadowRoot
-    );
-    const elementFirstChildShadowChildShadowLastChild = /** @type {HTMLElement} */ (
-      elementFirstChildShadowChildShadow.lastElementChild
-    );
-
+      `);
+    const elementFirstChild = /** @type {HTMLElement} */ element.firstElementChild;
+    const elementFirstChildShadow = /** @type {ShadowRoot} */ elementFirstChild.shadowRoot;
+    const elementFirstChildShadowChildren =
+      /** @type {HTMLElement[]} */
+      Array.from(elementFirstChildShadow.children);
+    const elementFirstChildShadowChildShadow =
+      /** @type {ShadowRoot} */
+      elementFirstChildShadowChildren[1].shadowRoot;
+    const elementFirstChildShadowChildShadowLastChild =
+      /** @type {HTMLElement} */
+      elementFirstChildShadowChildShadow.lastElementChild;
     expect(deepContains(element, elementFirstChild)).to.be.true;
     expect(deepContains(element, elementFirstChildShadow)).to.be.true;
     expect(deepContains(element, elementFirstChildShadowChildren[1])).to.be.true;
     expect(deepContains(element, elementFirstChildShadowChildShadow)).to.be.true;
     expect(deepContains(element, elementFirstChildShadowChildShadowLastChild)).to.be.true;
   });
-
   it('returns true if the element, which is located in ShadowsRoot, contains a target element, located in the LightDom', async () => {
-    const mainElement = /** @type {HTMLElement} */ (await fixture('<div id="main"></div>'));
+    const mainElement = /** @type {HTMLElement} */ await fixture('<div id="main"></div>');
     mainElement.innerHTML = `      
       <div slot="content" id="light-el-content">
         <input type="text" id="light-el-input-1"></input>
@@ -135,7 +131,9 @@ describe('deepContains()', () => {
         <input type="text" id="light-el-input-2"></input>
       </div>
     `;
-    const shadowRoot = mainElement.attachShadow({ mode: 'open' });
+    const shadowRoot = mainElement.attachShadow({
+      mode: 'open',
+    });
     shadowRoot.innerHTML = `
       <div id="dialog-wrapper">
         <div id="dialog-header">
@@ -146,15 +144,12 @@ describe('deepContains()', () => {
         </div>  
       </div>      
     `;
-    const inputElement = /** @type {HTMLElement} */ (
-      mainElement.querySelector('#light-el-input-2')
-    );
-    const dialogWrapperElement = /** @type {HTMLElement} */ (
-      shadowRoot.querySelector('#dialog-wrapper')
-    );
+    const inputElement = /** @type {HTMLElement} */ mainElement.querySelector('#light-el-input-2');
+    const dialogWrapperElement =
+      /** @type {HTMLElement} */
+      shadowRoot.querySelector('#dialog-wrapper');
     expect(deepContains(dialogWrapperElement, inputElement)).to.be.true;
   });
-
   it(`returns true if the element, which is located in ShadowRoot, contains a target element, located in the ShadowRoot element of the LightDom element  `, async () => {
     /**
      * The DOM for the `main` element looks as follows:
@@ -180,7 +175,7 @@ describe('deepContains()', () => {
      *   </div>
      * </div>
      */
-    const mainElement = /** @type {HTMLElement} */ (await fixture('<div id="main"></div>'));
+    const mainElement = /** @type {HTMLElement} */ await fixture('<div id="main"></div>');
     mainElement.innerHTML = `      
       <div slot="content" id="light-el-content">
         <div id="content-wrapper"></div>
@@ -189,24 +184,28 @@ describe('deepContains()', () => {
         <div id="content-wrapper"></div>
       </div>
     `;
-    const contentWrapper = /** @type {HTMLElement} */ (
-      mainElement.querySelector('#content-wrapper')
-    );
-    const contentWrapperShadowRoot = contentWrapper.attachShadow({ mode: 'open' });
+    const contentWrapper = /** @type {HTMLElement} */ mainElement.querySelector('#content-wrapper');
+    const contentWrapperShadowRoot = contentWrapper.attachShadow({
+      mode: 'open',
+    });
     contentWrapperShadowRoot.innerHTML = `
       <div id="conent-wrapper-sub"></div>
     `;
-    const contentWrapperSub = /** @type {HTMLElement} */ (
-      contentWrapperShadowRoot.querySelector('#conent-wrapper-sub')
-    );
-    const contentWrapperSubShadowRoot = contentWrapperSub.attachShadow({ mode: 'open' });
+    const contentWrapperSub =
+      /** @type {HTMLElement} */
+      contentWrapperShadowRoot.querySelector('#conent-wrapper-sub');
+    const contentWrapperSubShadowRoot = contentWrapperSub.attachShadow({
+      mode: 'open',
+    });
     contentWrapperSubShadowRoot.innerHTML = `
       <input type="type" id="content-input"></input>
     `;
-    const inputElement = /** @type {HTMLElement} */ (
-      contentWrapperSubShadowRoot.querySelector('#content-input')
-    );
-    const mainElementShadowRoot = mainElement.attachShadow({ mode: 'open' });
+    const inputElement =
+      /** @type {HTMLElement} */
+      contentWrapperSubShadowRoot.querySelector('#content-input');
+    const mainElementShadowRoot = mainElement.attachShadow({
+      mode: 'open',
+    });
     mainElementShadowRoot.innerHTML = `
       <div id="dialog-wrapper">
         <div id="dialog-header">
@@ -217,9 +216,9 @@ describe('deepContains()', () => {
         </div>  
       </div>      
     `;
-    const dialogWrapperElement = /** @type {HTMLElement} */ (
-      mainElementShadowRoot.querySelector('#dialog-wrapper')
-    );
+    const dialogWrapperElement =
+      /** @type {HTMLElement} */
+      mainElementShadowRoot.querySelector('#dialog-wrapper');
     expect(deepContains(dialogWrapperElement, inputElement)).to.be.true;
   });
 });