@vaadin/component-base 23.0.0-alpha2 → 23.0.0-beta1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/component-base",
-  "version": "23.0.0-alpha2",
+  "version": "23.0.0-beta1",
   "publishConfig": {
     "access": "public"
   },
@@ -18,6 +18,7 @@
   },
   "main": "index.js",
   "module": "index.js",
+  "type": "module",
   "files": [
     "custom_typings",
     "index.d.ts",
@@ -41,5 +42,5 @@
     "@vaadin/testing-helpers": "^0.3.2",
     "sinon": "^9.2.4"
   },
-  "gitHead": "070f586dead02ca41b66717820c647f48bf1665f"
+  "gitHead": "467244b76021176c109df675799b07029b293e58"
 }

package/src/a11y-announcer.d.ts

@@ -0,0 +1,10 @@
+/**
+ * @license
+ * Copyright (c) 2022 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+
+/**
+ * Cause a text string to be announced by screen readers.
+ */
+export function announce(text: string, options?: { mode?: 'polite' | 'assertive'; timeout?: number }): void;

package/src/a11y-announcer.js

@@ -0,0 +1,32 @@
+/**
+ * @license
+ * Copyright (c) 2022 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+
+const region = document.createElement('div');
+
+region.style.position = 'fixed';
+region.style.clip = 'rect(0px, 0px, 0px, 0px)';
+region.setAttribute('aria-live', 'polite');
+
+document.body.appendChild(region);
+
+/**
+ * Cause a text string to be announced by screen readers.
+ *
+ * @param {string} text The text that should be announced by the screen reader.
+ * @param {{mode?: string, timeout?: number}} options Additional options.
+ */
+export function announce(text, options = {}) {
+  const mode = options.mode || 'polite';
+  const timeout = options.timeout === undefined ? 150 : options.timeout;
+
+  region.setAttribute('aria-live', mode);
+
+  region.textContent = '';
+
+  setTimeout(() => {
+    region.textContent = text;
+  }, timeout);
+}

package/src/active-mixin.d.ts

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 Vaadin Ltd.
+ * Copyright (c) 2021 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { Constructor } from '@open-wc/dedupe-mixin';

package/src/active-mixin.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 Vaadin Ltd.
+ * Copyright (c) 2021 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { addListener } from '@vaadin/component-base/src/gestures.js';

package/src/async.js

@@ -182,10 +182,13 @@ const microTask = {
   run(callback) {
     if (!microtaskScheduled) {
       microtaskScheduled = true;
-      microtaskNode.textContent = microtaskNodeContent++;
+      microtaskNode.textContent = microtaskNodeContent;
+      microtaskNodeContent += 1;
     }
     microtaskCallbacks.push(callback);
-    return microtaskCurrHandle++;
+    const result = microtaskCurrHandle;
+    microtaskCurrHandle += 1;
+    return result;
   },
 
   /**

package/src/browser-utils.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 Vaadin Ltd.
+ * Copyright (c) 2021 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 

package/src/controller-mixin.d.ts

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 Vaadin Ltd.
+ * Copyright (c) 2021 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { Constructor } from '@open-wc/dedupe-mixin';

package/src/controller-mixin.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 Vaadin Ltd.
+ * Copyright (c) 2021 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { dedupingMixin } from '@polymer/polymer/lib/utils/mixin.js';

package/src/dir-helper.d.ts

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 Vaadin Ltd.
+ * Copyright (c) 2021 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 

package/src/dir-helper.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 Vaadin Ltd.
+ * Copyright (c) 2021 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 

package/src/dir-mixin.d.ts

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 Vaadin Ltd.
+ * Copyright (c) 2021 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { Constructor } from '@open-wc/dedupe-mixin';

package/src/dir-mixin.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 Vaadin Ltd.
+ * Copyright (c) 2021 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { DirHelper } from './dir-helper.js';

package/src/disabled-mixin.d.ts

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 Vaadin Ltd.
+ * Copyright (c) 2021 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { Constructor } from '@open-wc/dedupe-mixin';

package/src/disabled-mixin.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 Vaadin Ltd.
+ * Copyright (c) 2021 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { dedupingMixin } from '@polymer/polymer/lib/utils/mixin.js';

package/src/element-mixin.d.ts

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 Vaadin Ltd.
+ * Copyright (c) 2021 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import '../custom_typings/vaadin-usage-statistics.js';

package/src/element-mixin.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 Vaadin Ltd.
+ * Copyright (c) 2021 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { usageStatistics } from '@vaadin/vaadin-usage-statistics/vaadin-usage-statistics.js';
@@ -32,7 +32,7 @@ const registered = new Set();
 export const ElementMixin = (superClass) =>
   class VaadinElementMixin extends DirMixin(superClass) {
     static get version() {
-      return '23.0.0-alpha2';
+      return '23.0.0-beta1';
     }
 
     /** @protected */

package/src/focus-mixin.d.ts

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 Vaadin Ltd.
+ * Copyright (c) 2021 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { Constructor } from '@open-wc/dedupe-mixin';

package/src/focus-mixin.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 Vaadin Ltd.
+ * Copyright (c) 2021 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { dedupingMixin } from '@polymer/polymer/lib/utils/mixin.js';

package/src/focus-trap-controller.d.ts

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 Vaadin Ltd.
+ * Copyright (c) 2021 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { ReactiveController } from 'lit';
@@ -8,7 +8,7 @@ import { ReactiveController } from 'lit';
 /**
  * A controller for trapping focus within a DOM node.
  */
-declare class FocusTrapController implements ReactiveController {
+export class FocusTrapController implements ReactiveController {
   constructor(node: HTMLElement);
 
   hostConnected(): void;

package/src/focus-trap-controller.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 Vaadin Ltd.
+ * Copyright (c) 2021 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { getFocusableElements, isElementFocused } from './focus-utils.js';

package/src/focus-utils.d.ts

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 Vaadin Ltd.
+ * Copyright (c) 2021 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 

package/src/focus-utils.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 Vaadin Ltd.
+ * Copyright (c) 2021 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 

package/src/iron-list-core.js

@@ -193,7 +193,7 @@ export const ironList = {
   set _virtualStart(val) {
     val = this._clamp(val, 0, this._maxVirtualStart);
     if (this.grid) {
-      val = val - (val % this._itemsPerRow);
+      val -= val % this._itemsPerRow;
     }
     this._virtualStartVal = val;
   },
@@ -206,12 +206,12 @@ export const ironList = {
    * The k-th tile that is at the top of the scrolling list.
    */
   set _physicalStart(val) {
-    val = val % this._physicalCount;
+    val %= this._physicalCount;
     if (val < 0) {
       val = this._physicalCount + val;
     }
     if (this.grid) {
-      val = val - (val % this._itemsPerRow);
+      val -= val % this._itemsPerRow;
     }
     this._physicalStartVal = val;
   },
@@ -260,7 +260,7 @@ export const ironList = {
       var physicalOffset = this._physicalTop + this._scrollOffset;
 
       idx =
-        this._iterateItems(function (pidx, vidx) {
+        this._iterateItems((pidx, vidx) => {
           physicalOffset += this._getPhysicalSizeIncrement(pidx);
 
           if (physicalOffset > this._scrollPosition) {
@@ -288,7 +288,7 @@ export const ironList = {
         idx = Math.min(this._virtualCount, this.firstVisibleIndex + this._estRowsInView * this._itemsPerRow - 1);
       } else {
         var physicalOffset = this._physicalTop + this._scrollOffset;
-        this._iterateItems(function (pidx, vidx) {
+        this._iterateItems((pidx, vidx) => {
           if (physicalOffset < this._scrollBottom) {
             idx = vidx;
           }
@@ -334,10 +334,10 @@ export const ironList = {
     this._lastVisibleIndexVal = null;
     // Random access.
     if (Math.abs(delta) > this._physicalSize && this._physicalSize > 0) {
-      delta = delta - this._scrollOffset;
+      delta -= this._scrollOffset;
       var idxAdjustment = Math.round(delta / this._physicalAverage) * this._itemsPerRow;
-      this._virtualStart = this._virtualStart + idxAdjustment;
-      this._physicalStart = this._physicalStart + idxAdjustment;
+      this._virtualStart += idxAdjustment;
+      this._physicalStart += idxAdjustment;
       // Estimate new physical offset based on the virtual start index.
       // adjusts the physical start position to stay in sync with the clamped
       // virtual start index. It's critical not to let this value be
@@ -353,11 +353,11 @@ export const ironList = {
       var reusables = this._getReusables(isScrollingDown);
       if (isScrollingDown) {
         this._physicalTop = reusables.physicalTop;
-        this._virtualStart = this._virtualStart + reusables.indexes.length;
-        this._physicalStart = this._physicalStart + reusables.indexes.length;
+        this._virtualStart += reusables.indexes.length;
+        this._physicalStart += reusables.indexes.length;
       } else {
-        this._virtualStart = this._virtualStart - reusables.indexes.length;
-        this._physicalStart = this._physicalStart - reusables.indexes.length;
+        this._virtualStart -= reusables.indexes.length;
+        this._physicalStart -= reusables.indexes.length;
       }
       this._update(reusables.indexes, isScrollingDown ? null : reusables.indexes);
       this._debounce('_increasePoolIfNeeded', this._increasePoolIfNeeded.bind(this, 0), microTask);
@@ -396,7 +396,7 @@ export const ironList = {
     // eslint-disable-next-line no-constant-condition
     while (true) {
       physicalItemHeight = this._getPhysicalSizeIncrement(ith);
-      offsetContent = offsetContent - physicalItemHeight;
+      offsetContent -= physicalItemHeight;
       if (idxs.length >= physicalCount || offsetContent <= protectedOffsetContent) {
         break;
       }
@@ -410,7 +410,7 @@ export const ironList = {
           break;
         }
         idxs.push(ith);
-        top = top + physicalItemHeight;
+        top += physicalItemHeight;
         ith = (ith + 1) % physicalCount;
       } else {
         // Check that index is within the valid range.
@@ -422,7 +422,7 @@ export const ironList = {
           break;
         }
         idxs.push(ith);
-        top = top - physicalItemHeight;
+        top -= physicalItemHeight;
         ith = ith === 0 ? physicalCount - 1 : ith - 1;
       }
     }
@@ -492,7 +492,7 @@ export const ironList = {
       for (var i = 0; i < delta; i++) {
         this._physicalSizes.push(0);
       }
-      this._physicalCount = this._physicalCount + delta;
+      this._physicalCount += delta;
       // Update the physical start if it needs to preserve the model of the
       // focused item. In this situation, the focused item is currently rendered
       // and its model would have changed after increasing the pool if the
@@ -502,7 +502,7 @@ export const ironList = {
         this._isIndexRendered(this._focusedVirtualIndex) &&
         this._getPhysicalIndex(this._focusedVirtualIndex) < this._physicalEnd
       ) {
-        this._physicalStart = this._physicalStart + delta;
+        this._physicalStart += delta;
       }
       this._update();
       this._templateCost = (window.performance.now() - ts) / delta;
@@ -535,8 +535,8 @@ export const ironList = {
     if (this._physicalCount !== 0) {
       var reusables = this._getReusables(true);
       this._physicalTop = reusables.physicalTop;
-      this._virtualStart = this._virtualStart + reusables.indexes.length;
-      this._physicalStart = this._physicalStart + reusables.indexes.length;
+      this._virtualStart += reusables.indexes.length;
+      this._physicalStart += reusables.indexes.length;
       this._update(reusables.indexes);
       this._update();
       this._increasePoolIfNeeded(0);
@@ -668,7 +668,7 @@ export const ironList = {
     var prevPhysicalAvg = this._physicalAverage;
 
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    this._iterateItems(function (pidx, vidx) {
+    this._iterateItems((pidx, vidx) => {
       oldPhysicalSize += this._physicalSizes[pidx];
       this._physicalSizes[pidx] = this._physicalItems[pidx].offsetHeight;
       newPhysicalSize += this._physicalSizes[pidx];
@@ -712,11 +712,11 @@ export const ironList = {
       var totalItemWidth = this._itemsPerRow * this._itemWidth;
       var rowOffset = (this._viewportWidth - totalItemWidth) / 2;
 
-      this._iterateItems(function (pidx, vidx) {
+      this._iterateItems((pidx, vidx) => {
         var modulus = vidx % this._itemsPerRow;
         var x = Math.floor(modulus * this._itemWidth + rowOffset);
         if (this._isRTL) {
-          x = x * -1;
+          x *= -1;
         }
         this.translate3d(x + 'px', y + 'px', 0, this._physicalItems[pidx]);
         if (this._shouldRenderNextRow(vidx)) {
@@ -726,7 +726,7 @@ export const ironList = {
     } else {
       const order = [];
       // eslint-disable-next-line @typescript-eslint/no-unused-vars
-      this._iterateItems(function (pidx, vidx) {
+      this._iterateItems((pidx, vidx) => {
         const item = this._physicalItems[pidx];
         this.translate3d(0, y + 'px', 0, item);
         y += this._physicalSizes[pidx];
@@ -771,7 +771,7 @@ export const ironList = {
       this._virtualStart === 0 ? this._physicalTop : Math.min(this._scrollPosition + this._physicalTop, 0);
     // Note: the delta can be positive or negative.
     if (deltaHeight !== 0) {
-      this._physicalTop = this._physicalTop - deltaHeight;
+      this._physicalTop -= deltaHeight;
       // This may be called outside of a scrollHandler, so use last cached position
       var scrollTop = this._scrollPosition;
       // juking scroll position during interial scrolling on iOS is no bueno
@@ -847,9 +847,9 @@ export const ironList = {
     var hiddenContentSize = this._hiddenContentSize;
     // scroll to the item as much as we can.
     while (currentVirtualItem < idx && targetOffsetTop <= hiddenContentSize) {
-      targetOffsetTop = targetOffsetTop + this._getPhysicalSizeIncrement(currentTopItem);
+      targetOffsetTop += this._getPhysicalSizeIncrement(currentTopItem);
       currentTopItem = (currentTopItem + 1) % this._physicalCount;
-      currentVirtualItem++;
+      currentVirtualItem += 1;
     }
     this._updateScrollerSize(true);
     this._positionItems();
@@ -875,7 +875,7 @@ export const ironList = {
   _resizeHandler: function () {
     this._debounce(
       '_render',
-      function () {
+      () => {
         // clear cached visible index.
         this._firstVisibleIndexVal = null;
         this._lastVisibleIndexVal = null;

package/src/keyboard-mixin.d.ts

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 Vaadin Ltd.
+ * Copyright (c) 2021 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { Constructor } from '@open-wc/dedupe-mixin';

package/src/keyboard-mixin.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 Vaadin Ltd.
+ * Copyright (c) 2021 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { dedupingMixin } from '@polymer/polymer/lib/utils/mixin.js';

package/src/resize-mixin.d.ts

@@ -0,0 +1,19 @@
+/**
+ * @license
+ * Copyright (c) 2021 - 2022 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { Constructor } from '@open-wc/dedupe-mixin';
+
+/**
+ * A mixin that uses a ResizeObserver to listen to host size changes.
+ */
+export declare function ResizeMixin<T extends Constructor<HTMLElement>>(base: T): T & Constructor<ResizeMixinClass>;
+
+export declare class ResizeMixinClass {
+  /**
+   * A handler invoked on host resize. By default, it does nothing.
+   * Override the method to implement your own behavior.
+   */
+  protected _onResize(contentRect: DOMRect): void;
+}

package/src/resize-mixin.js

@@ -0,0 +1,56 @@
+/**
+ * @license
+ * Copyright (c) 2021 - 2022 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { dedupingMixin } from '@polymer/polymer/lib/utils/mixin.js';
+
+const observer = new ResizeObserver((entries) => {
+  setTimeout(() => {
+    entries.forEach((entry) => {
+      entry.target._onResize(entry.contentRect);
+    });
+  });
+});
+
+/**
+ * A mixin that uses a ResizeObserver to listen to host size changes.
+ *
+ * @polymerMixin
+ */
+export const ResizeMixin = dedupingMixin(
+  (superclass) =>
+    class ResizeMixinClass extends superclass {
+      /** @protected */
+      connectedCallback() {
+        super.connectedCallback();
+        observer.observe(this);
+      }
+
+      /** @protected */
+      disconnectedCallback() {
+        super.disconnectedCallback();
+        observer.unobserve(this);
+      }
+
+      /**
+       * A handler invoked on host resize. By default, it does nothing.
+       * Override the method to implement your own behavior.
+       *
+       * @protected
+       */
+      _onResize(_contentRect) {
+        // To be implemented.
+      }
+
+      /**
+       * @deprecated Since Vaadin 23, `notifyResize()` is deprecated. The component uses a
+       * ResizeObserver internally and doesn't need to be explicitly notified of resizes.
+       */
+      notifyResize() {
+        console.warn(
+          `WARNING: Since Vaadin 23, notifyResize() is deprecated. The component uses a ResizeObserver internally and doesn't need to be explicitly notified of resizes.`
+        );
+      }
+    }
+);

package/src/slot-controller.d.ts

@@ -1,11 +1,11 @@
 /**
  * @license
- * Copyright (c) 2021 Vaadin Ltd.
+ * Copyright (c) 2021 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { ReactiveController } from 'lit';
 
-export class SlotController implements ReactiveController {
+export class SlotController extends EventTarget implements ReactiveController {
   constructor(
     host: HTMLElement,
     slotName: string,
@@ -34,6 +34,12 @@ export class SlotController implements ReactiveController {
 
   protected defaultNode: Node;
 
+  protected defaultId: string;
+
+  protected attachDefaultNode(): Node | undefined;
+
+  protected initNode(node: Node): void;
+
   /**
    * Override to initialize the newly added custom node.
    */

package/src/slot-controller.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 Vaadin Ltd.
+ * Copyright (c) 2021 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { FlattenedNodesObserver } from '@polymer/polymer/lib/utils/flattened-nodes-observer.js';
@@ -8,44 +8,46 @@ import { FlattenedNodesObserver } from '@polymer/polymer/lib/utils/flattened-nod
 /**
  * A controller for providing content to slot element and observing changes.
  */
-export class SlotController {
+export class SlotController extends EventTarget {
   constructor(host, slotName, slotFactory, slotInitializer) {
+    super();
+
     this.host = host;
     this.slotName = slotName;
     this.slotFactory = slotFactory;
     this.slotInitializer = slotInitializer;
+    this.defaultId = SlotController.generateId(slotName, host);
+  }
+
+  /**
+   * Ensure that every instance has unique ID.
+   *
+   * @param {string} slotName
+   * @param {HTMLElement} host
+   * @return {string}
+   * @protected
+   */
+  static generateId(slotName, host) {
+    const prefix = slotName || 'default';
+
+    // Maintain the unique ID counter for a given prefix.
+    this[`${prefix}Id`] = 1 + this[`${prefix}Id`] || 0;
+
+    return `${prefix}-${host.localName}-${this[`${prefix}Id`]}`;
   }
 
   hostConnected() {
     if (!this.initialized) {
-      const { host, slotName, slotFactory, slotInitializer } = this;
-
-      const slotted = this.getSlotChild();
-
-      if (!slotted) {
-        // Slot factory is optional, some slots don't have default content.
-        if (slotFactory) {
-          const slotContent = slotFactory(host);
-          if (slotContent instanceof Element) {
-            if (slotName !== '') {
-              slotContent.setAttribute('slot', slotName);
-            }
-            host.appendChild(slotContent);
-            this.node = slotContent;
-
-            // Store reference to not pass default node to `initCustomNode`.
-            this.defaultNode = slotContent;
-          }
-        }
+      let node = this.getSlotChild();
+
+      if (!node) {
+        node = this.attachDefaultNode();
       } else {
-        this.node = slotted;
+        this.node = node;
+        this.initCustomNode(node);
       }
 
-      // Don't try to bind `this` to initializer (normally it's arrow function).
-      // Instead, pass the host as a first argument to access component's state.
-      if (slotInitializer) {
-        slotInitializer(host, this.node);
-      }
+      this.initNode(node);
 
       // TODO: Consider making this behavior opt-in to improve performance.
       this.observe();
@@ -54,6 +56,36 @@ export class SlotController {
     }
   }
 
+  /**
+   * Create and attach default node using the slot factory.
+   * @return {Node | undefined}
+   * @protected
+   */
+  attachDefaultNode() {
+    const { host, slotName, slotFactory } = this;
+
+    // Check if the node was created previously and if so, reuse it.
+    let node = this.defaultNode;
+
+    // Slot factory is optional, some slots don't have default content.
+    if (!node && slotFactory) {
+      node = slotFactory(host);
+      if (node instanceof Element) {
+        if (slotName !== '') {
+          node.setAttribute('slot', slotName);
+        }
+        this.node = node;
+        this.defaultNode = node;
+      }
+    }
+
+    if (node) {
+      host.appendChild(node);
+    }
+
+    return node;
+  }
+
   /**
    * Return a reference to the node managed by the controller.
    * @return {Node}
@@ -69,6 +101,19 @@ export class SlotController {
     });
   }
 
+  /**
+   * @param {Node} node
+   * @protected
+   */
+  initNode(node) {
+    const { slotInitializer } = this;
+    // Don't try to bind `this` to initializer (normally it's arrow function).
+    // Instead, pass the host as a first argument to access component's state.
+    if (slotInitializer) {
+      slotInitializer(this.host, node);
+    }
+  }
+
   /**
    * Override to initialize the newly added custom node.
    *
@@ -115,6 +160,8 @@ export class SlotController {
 
         if (newNode !== this.defaultNode) {
           this.initCustomNode(newNode);
+
+          this.initNode(newNode);
         }
       }
     });

package/src/slot-mixin.d.ts

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 Vaadin Ltd.
+ * Copyright (c) 2021 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { Constructor } from '@open-wc/dedupe-mixin';

package/src/slot-mixin.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 Vaadin Ltd.
+ * Copyright (c) 2021 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { dedupingMixin } from '@polymer/polymer/lib/utils/mixin.js';

package/src/tabindex-mixin.d.ts

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 Vaadin Ltd.
+ * Copyright (c) 2021 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { Constructor } from '@open-wc/dedupe-mixin';

package/src/tabindex-mixin.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 Vaadin Ltd.
+ * Copyright (c) 2021 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { DisabledMixin } from './disabled-mixin.js';

package/src/templates.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 Vaadin Ltd.
+ * Copyright (c) 2021 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 

package/src/virtualizer-iron-list-adapter.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 Vaadin Ltd.
+ * Copyright (c) 2021 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { animationFrame, timeOut } from './async.js';