feat: vaadin-themable-mixin LitElement support

packages/vaadin-themable-mixin/test/lit-setup.js

@@ -0,0 +1,32 @@
+import { LitElement, unsafeCSS } from 'lit';
+import { ThemableMixin } from '../vaadin-themable-mixin.js';
+
+/**
+ * This is used for overriding the function that defines custom elements in the test suites.
+ * By default, the suite creates PolymerElement based custom elements, but in the
+ * -lit.test.js tests, we specifically want to create LitElement based custom elements instead.
+ */
+window.defineCustomElementFunction = (name, parentName, content, styles) => {
+  const parentElement = parentName ? customElements.get(parentName) : LitElement;
+  class CustomElement extends ThemableMixin(parentElement) {
+    static get is() {
+      return name;
+    }
+
+    static get styles() {
+      return unsafeCSS(styles);
+    }
+
+    render() {
+      if (content) {
+        const template = document.createElement('template');
+        template.innerHTML = content;
+        return template.content;
+      } else {
+        return super.render();
+      }
+    }
+  }
+
+  customElements.define(name, CustomElement);
+};

packages/vaadin-themable-mixin/test/register-styles-lit.test.js

@@ -0,0 +1,8 @@
+import { expect } from '@esm-bundle/chai';
+import './lit-setup.js';
+import './register-styles.test.js';
+import { LitElement } from 'lit';
+
+it('should have defined LitElement based custom elements', () => {
+  expect(document.createElement('register-styles-component-type-test')).to.be.instanceOf(LitElement);
+});

packages/vaadin-themable-mixin/test/register-styles.test.js

@@ -6,20 +6,24 @@ import { ThemableMixin } from '../vaadin-themable-mixin.js';
 
 let attachedInstances = [];
 
-function define(customElementName) {
-  customElements.define(
-    customElementName,
-    class extends ThemableMixin(PolymerElement) {
-      static get is() {
-        return customElementName;
-      }
+let define =
+  window.defineCustomElementFunction ||
+  ((name) => {
+    customElements.define(
+      name,
+      class extends ThemableMixin(PolymerElement) {
+        static get is() {
+          return name;
+        }
 
-      static get template() {
-        return html`foo`;
+        static get template() {
+          return html`foo`;
+        }
       }
-    }
-  );
-}
+    );
+  });
+
+define('register-styles-component-type-test');
 
 function defineAndInstantiate(customElementName) {
   define(customElementName);
@@ -160,19 +164,27 @@ describe('registerStyles', () => {
     it('should not include duplicate styles', () => {
       registerStyles(undefined, css``, { moduleId: unique('id') });
 
-      const duplicateStyle = css`
-        :host {
-          color: rgb(255, 0, 0);
-        }
-      `;
+      const duplicateStyle = ':host { color: rgb(255, 0, 0); }';
       // Need to use both moduleId and include to verify the fix in style-modules -adapter
-      registerStyles(unique('component'), duplicateStyle, { include: [unique('id')], moduleId: unique('id2') });
+      registerStyles(unique('component'), unsafeCSS(duplicateStyle), {
+        include: [unique('id')],
+        moduleId: unique('id2')
+      });
 
       const instance = defineAndInstantiate(unique('component'));
-      // Get all the styles from the component as one big string (let's assume it may have multiple style tags)
-      const styles = [...instance.shadowRoot.querySelectorAll('style')].map((style) => style.textContent).join('');
+
+      // Get all the style rules from the component
+      // Gather from the <style> tags (PolymerElement) and from the adoptedStyleSheets (LitElement)
+      const rules = [
+        ...(instance.shadowRoot.adoptedStyleSheets || []),
+        ...[...instance.shadowRoot.querySelectorAll('style')].map((style) => style.sheet)
+      ]
+        .map((sheet) => [...sheet.cssRules])
+        .flat();
+
       // Check the number of occurences of the style rule
-      const occurrences = styles.split(duplicateStyle.toString()).length - 1;
+      const occurrences = rules.filter((rule) => rule.cssText === duplicateStyle).length;
+
       // There should be only one occurence
       expect(occurrences).to.equal(1);
     });
@@ -200,12 +212,15 @@ describe('registerStyles', () => {
         expect(console.warn.called).to.be.false;
       });
 
-      it('should not warn about registering the style too late 2', () => {
-        define(unique());
-        registerStyles(unique(), styles);
+      if (customElements.get('register-styles-component-type-test').template) {
+        // Only relevant for PolymerElement based components
+        it('should not warn about registering the style too late 2 (Polymer only)', () => {
+          define(unique());
+          registerStyles(unique(), styles);
 
-        expect(console.warn.called).to.be.false;
-      });
+          expect(console.warn.called).to.be.false;
+        });
+      }
     });
   });
 });

packages/vaadin-themable-mixin/test/themable-mixin-lit.test.js

@@ -0,0 +1,8 @@
+import { expect } from '@esm-bundle/chai';
+import './lit-setup.js';
+import './themable-mixin.test.js';
+import { LitElement } from 'lit';
+
+it('should have defined LitElement based custom elements', () => {
+  expect(document.createElement('themable-mixin-component-type-test')).to.be.instanceOf(LitElement);
+});