experiment: add Lit based version of vaadin-scroller

packages/scroller/package.json

@@ -21,6 +21,8 @@
   "type": "module",
   "files": [
     "src",
+    "!src/vaadin-lit-scroller.d.ts",
+    "!src/vaadin-lit-scroller.js",
     "theme",
     "vaadin-*.d.ts",
     "vaadin-*.js",
@@ -41,7 +43,8 @@
     "@vaadin/component-base": "24.6.0-alpha0",
     "@vaadin/vaadin-lumo-styles": "24.6.0-alpha0",
     "@vaadin/vaadin-material-styles": "24.6.0-alpha0",
-    "@vaadin/vaadin-themable-mixin": "24.6.0-alpha0"
+    "@vaadin/vaadin-themable-mixin": "24.6.0-alpha0",
+    "lit": "^3.0.0"
   },
   "devDependencies": {
     "@vaadin/chai-plugins": "24.6.0-alpha0",

packages/scroller/src/vaadin-lit-scroller.d.ts

@@ -0,0 +1 @@
+export * from './vaadin-scroller.js';

packages/scroller/src/vaadin-lit-scroller.js

@@ -0,0 +1,69 @@
+/**
+ * @license
+ * Copyright (c) 2020 - 2024 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { css, html, LitElement } from 'lit';
+import { defineCustomElement } from '@vaadin/component-base/src/define.js';
+import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
+import { OverflowController } from '@vaadin/component-base/src/overflow-controller.js';
+import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
+import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { ScrollerMixin } from './vaadin-scroller-mixin';
+
+/**
+ * LitElement based version of `<vaadin-scroller>` web component.
+ *
+ * ## Disclaimer
+ *
+ * This component is an experiment and not yet a part of Vaadin platform.
+ * There is no ETA regarding specific Vaadin version where it'll land.
+ * Feel free to try this code in your apps as per Apache 2.0 license.
+ */
+class Scroller extends ScrollerMixin(ElementMixin(ThemableMixin(PolylitMixin(LitElement)))) {
+  static get is() {
+    return 'vaadin-scroller';
+  }
+
+  static get styles() {
+    return css`
+      :host {
+        display: block;
+        overflow: auto;
+      }
+
+      :host([hidden]) {
+        display: none !important;
+      }
+
+      :host([scroll-direction='vertical']) {
+        overflow-x: hidden;
+      }
+
+      :host([scroll-direction='horizontal']) {
+        overflow-y: hidden;
+      }
+
+      :host([scroll-direction='none']) {
+        overflow: hidden;
+      }
+    `;
+  }
+
+  /** @protected */
+  render() {
+    return html`<slot></slot>`;
+  }
+
+  /** @protected */
+  ready() {
+    super.ready();
+
+    this.__overflowController = new OverflowController(this);
+    this.addController(this.__overflowController);
+  }
+}
+
+defineCustomElement(Scroller);
+
+export { Scroller };

packages/scroller/test/scroller-lit.test.js

@@ -0,0 +1,2 @@
+import '../src/vaadin-lit-scroller.js';
+import './scroller.common.js';

packages/scroller/test/scroller-polymer.test.js

@@ -0,0 +1,2 @@
+import '../src/vaadin-scroller.js';
+import './scroller.common.js';

packages/scroller/test/scroller.test.js → packages/scroller/test/scroller.common.js

@@ -1,13 +1,13 @@
 import { expect } from '@vaadin/chai-plugins';
-import { fixtureSync, nextFrame, nextRender } from '@vaadin/testing-helpers';
+import { fixtureSync, nextFrame, nextRender, nextUpdate } from '@vaadin/testing-helpers';
 import { sendKeys } from '@web/test-runner-commands';
-import '../vaadin-scroller.js';
 
 describe('vaadin-scroller', () => {
   let scroller;
 
-  beforeEach(() => {
+  beforeEach(async () => {
     scroller = fixtureSync('<vaadin-scroller></vaadin-scroller>');
+    await nextRender();
   });
 
   describe('focus', () => {
@@ -47,8 +47,9 @@ describe('vaadin-scroller', () => {
   });
 
   describe('scrollDirection', () => {
-    it('should reflect scrollDirection to attribute', () => {
+    it('should reflect scrollDirection to attribute', async () => {
       scroller.scrollDirection = 'horizontal';
+      await nextUpdate(scroller);
       expect(scroller.getAttribute('scroll-direction')).to.equal('horizontal');
     });
 
@@ -57,8 +58,9 @@ describe('vaadin-scroller', () => {
       expect(getComputedStyle(scroller).overflowY).to.equal('auto');
     });
 
-    it('should be possible to enable only vertical scrollbars', () => {
+    it('should be possible to enable only vertical scrollbars', async () => {
       scroller.setAttribute('scroll-direction', 'vertical');
+      await nextUpdate(scroller);
       expect(getComputedStyle(scroller).overflowY).to.equal('auto');
       expect(getComputedStyle(scroller).overflowX).to.equal('hidden');
     });