@lynx-js/web-elements 0.7.1 → 0.7.3

package/CHANGELOG.md

@@ -1,5 +1,50 @@
 # @lynx-js/web-elements
 
+## 0.7.3
+
+### Patch Changes
+
+- refactor: allow elements to be rendered before :defined ([#855](https://github.com/lynx-family/lynx-stack/pull/855))
+
+  Before this commit, we don't allow developers to render these elements before they're defined.
+
+  In this commit, we will remove these restrictions.
+
+- fix: remove the style `contain: content` of x-foldview-ng, otherwise it will cause the `position: fixed` elements to be positioned incorrectly after scrolling. ([#878](https://github.com/lynx-family/lynx-stack/pull/878))
+
+- fix: x-list should observe property list-type change. ([#862](https://github.com/lynx-family/lynx-stack/pull/862))
+
+  Before this commit, list-type only works when it was first assigned.
+
+  use `requestAnimationFrame` instead of `queueMicrotask` to layoutListItem, this is because it may cause crashes in webkit.
+
+- fix: list-item should support linear layout. ([#859](https://github.com/lynx-family/lynx-stack/pull/859))
+
+- Updated dependencies []:
+  - @lynx-js/web-elements-template@0.7.3
+
+## 0.7.2
+
+### Patch Changes
+
+- refactor: split shadowroot templates into a package ([#811](https://github.com/lynx-family/lynx-stack/pull/811))
+
+  We're going to implement Lynx Web Platform's SSR based on the `shadowrootmode`.
+
+  `https://developer.mozilla.org/en-US/docs/Web/API/HTMLTemplateElement/shadowRootMode`
+
+  (chrome 111, firefox 123, safari 16.4)
+
+  This means those modern browsers are able to show the correct layout before the web components are defined.
+
+  To make this work, we have to split the shadowroot template string into a new package `@lynx-js/web-elements-template`.
+
+  No features affected.
+
+- Updated dependencies [[`ae9652a`](https://github.com/lynx-family/lynx-stack/commit/ae9652a7a1d6247959bb41e7d76793300eddb741), [`ae9652a`](https://github.com/lynx-family/lynx-stack/commit/ae9652a7a1d6247959bb41e7d76793300eddb741)]:
+  - @lynx-js/web-elements-template@0.7.2
+  - @lynx-js/web-elements-reactive@0.2.2
+
 ## 0.7.1
 
 ### Patch Changes

package/dist/ScrollView/ScrollView.js

@@ -9,8 +9,9 @@ import { FadeEdgeLengthAttribute } from './FadeEdgeLengthAttribute.js';
 import { ScrollAttributes } from './ScrollAttributes.js';
 import { ScrollViewEvents } from './ScrollViewEvents.js';
 import { ScrollIntoView } from './ScrollIntoView.js';
-import { Component, html } from '@lynx-js/web-elements-reactive';
+import { Component } from '@lynx-js/web-elements-reactive';
 import { scrollContainerDom } from '../common/constants.js';
+import { templateScrollView } from '@lynx-js/web-elements-template';
 let ScrollView = (() => {
     let _classDecorators = [Component('scroll-view', [
             CommonEventsAndMethods,
@@ -18,89 +19,7 @@ let ScrollView = (() => {
             FadeEdgeLengthAttribute,
             ScrollViewEvents,
             ScrollIntoView,
-        ], html ` <style>
-      .placeholder-dom {
-        display: none;
-        flex: 0 0 0;
-        align-self: stretch;
-        min-height: 0;
-        min-width: 0;
-      }
-      .mask {
-        z-index: 1;
-        position: sticky;
-      }
-      .observer-container {
-        flex-direction: inherit;
-        overflow: visible;
-      }
-      .observer {
-        display: flex;
-      }
-      ::-webkit-scrollbar {
-        display: none;
-      }
-
-      @keyframes topFading {
-        0% {
-          box-shadow: transparent 0px 0px 0px 0px;
-        }
-        5% {
-          box-shadow: var(--scroll-view-bg-color) 0px 0px
-            var(--scroll-view-fading-edge-length)
-            var(--scroll-view-fading-edge-length);
-        }
-        100% {
-          box-shadow: var(--scroll-view-bg-color) 0px 0px
-            var(--scroll-view-fading-edge-length)
-            var(--scroll-view-fading-edge-length);
-        }
-      }
-      @keyframes botFading {
-        0% {
-          box-shadow: var(--scroll-view-bg-color) 0px 0px
-            var(--scroll-view-fading-edge-length)
-            var(--scroll-view-fading-edge-length);
-        }
-        95% {
-          box-shadow: var(--scroll-view-bg-color) 0px 0px
-            var(--scroll-view-fading-edge-length)
-            var(--scroll-view-fading-edge-length);
-        }
-        100% {
-          box-shadow: transparent 0px 0px 0px 0px;
-        }
-      }
-    </style>
-      <div
-        class="mask placeholder-dom"
-        id="top-fade-mask"
-        part="top-fade-mask"
-      ></div>
-      <div
-        class="observer-container placeholder-dom"
-        part="upper-threshold-observer"
-      >
-        <div
-          class="observer placeholder-dom"
-          id="upper-threshold-observer"
-        ></div>
-      </div>
-      <slot></slot>
-      <div
-        class="observer-container placeholder-dom"
-        part="lower-threshold-observer"
-      >
-        <div
-          class="observer placeholder-dom"
-          id="lower-threshold-observer"
-        ></div>
-      </div>
-      <div
-        class="mask placeholder-dom"
-        id="bot-fade-mask"
-        part="bot-fade-mask"
-      ></div>`)];
+        ], templateScrollView)];
     let _classDescriptor;
     let _classExtraInitializers = [];
     let _classThis;

package/dist/XAudioTT/XAudioTT.js

@@ -4,14 +4,15 @@ import { __esDecorate, __runInitializers } from "tslib";
 // Licensed under the Apache License Version 2.0 that can be found in the
 // LICENSE file in the root directory of this source tree.
 */
-import { Component, html, genDomGetter, bindToAttribute, } from '@lynx-js/web-elements-reactive';
+import { Component, genDomGetter, bindToAttribute, } from '@lynx-js/web-elements-reactive';
 import { XAudioAttribute } from './XAudioAttribute.js';
 import { XAudioEvents } from './XAudioEvents.js';
 import { CommonEventsAndMethods } from '../common/CommonEventsAndMethods.js';
 import { commonComponentEventSetting } from '../common/commonEventInitConfiguration.js';
 import { XAudioErrorCode, audioPlaybackStateMap, getAudioState, xAudioBlob, xAudioSrc, } from './utils.js';
+import { templateXAudioTT } from '@lynx-js/web-elements-template';
 let XAudioTT = (() => {
-    let _classDecorators = [Component('x-audio-tt', [CommonEventsAndMethods, XAudioAttribute, XAudioEvents], html `<audio id="audio"></audio>`)];
+    let _classDecorators = [Component('x-audio-tt', [CommonEventsAndMethods, XAudioAttribute, XAudioEvents], templateXAudioTT)];
     let _classDescriptor;
     let _classExtraInitializers = [];
     let _classThis;

package/dist/XImage/FilterImage.js

@@ -4,13 +4,14 @@ import { __esDecorate, __runInitializers } from "tslib";
 // Licensed under the Apache License Version 2.0 that can be found in the
 // LICENSE file in the root directory of this source tree.
 */
-import { Component, html } from '@lynx-js/web-elements-reactive';
+import { Component } from '@lynx-js/web-elements-reactive';
 import { CommonEventsAndMethods } from '../common/CommonEventsAndMethods.js';
 import { DropShadow } from './DropShadow.js';
 import { ImageSrc } from './ImageSrc.js';
 import { ImageEvents } from './ImageEvents.js';
+import { templateFilterImage } from '@lynx-js/web-elements-template';
 let FilterImage = (() => {
-    let _classDecorators = [Component('filter-image', [CommonEventsAndMethods, ImageSrc, DropShadow, ImageEvents], html ` <img part="img" alt="" id="img" /> `)];
+    let _classDecorators = [Component('filter-image', [CommonEventsAndMethods, ImageSrc, DropShadow, ImageEvents], templateFilterImage({}))];
     let _classDescriptor;
     let _classExtraInitializers = [];
     let _classThis;

package/dist/XImage/XImage.js

@@ -4,12 +4,13 @@ import { __esDecorate, __runInitializers } from "tslib";
 // Licensed under the Apache License Version 2.0 that can be found in the
 // LICENSE file in the root directory of this source tree.
 */
-import { Component, html } from '@lynx-js/web-elements-reactive';
+import { Component } from '@lynx-js/web-elements-reactive';
 import { CommonEventsAndMethods } from '../common/CommonEventsAndMethods.js';
 import { ImageSrc } from './ImageSrc.js';
 import { ImageEvents } from './ImageEvents.js';
+import { templateXImage } from '@lynx-js/web-elements-template';
 let XImage = (() => {
-    let _classDecorators = [Component('x-image', [CommonEventsAndMethods, ImageSrc, ImageEvents], html ` <img part="img" alt="" id="img" /> `)];
+    let _classDecorators = [Component('x-image', [CommonEventsAndMethods, ImageSrc, ImageEvents], templateXImage({}))];
     let _classDescriptor;
     let _classExtraInitializers = [];
     let _classThis;

package/dist/XInput/XInput.js

@@ -4,12 +4,13 @@ import { __esDecorate, __runInitializers } from "tslib";
 // Licensed under the Apache License Version 2.0 that can be found in the
 // LICENSE file in the root directory of this source tree.
 */
-import { Component, genDomGetter, html } from '@lynx-js/web-elements-reactive';
+import { Component, genDomGetter } from '@lynx-js/web-elements-reactive';
 import { InputBaseAttributes } from './InputBaseAttributes.js';
 import { Placeholder } from './Placeholder.js';
 import { XInputAttribute } from './XInputAttribute.js';
 import { XInputEvents } from './XInputEvents.js';
 import { CommonEventsAndMethods } from '../common/CommonEventsAndMethods.js';
+import { templateXInput } from '@lynx-js/web-elements-template';
 let XInput = (() => {
     let _classDecorators = [Component('x-input', [
             CommonEventsAndMethods,
@@ -17,24 +18,7 @@ let XInput = (() => {
             XInputAttribute,
             InputBaseAttributes,
             XInputEvents,
-        ], html ` <style>
-      #input:focus {
-        outline: none;
-      }
-      #form {
-        display: none;
-      }
-    </style>
-    <form id="form" part="form" method="dialog">
-      <input
-        id="input"
-        part="input"
-        step="any"
-        type="text"
-        inputmode="text"
-        spell-check="true"
-      />
-    </form>`)];
+        ], templateXInput)];
     let _classDescriptor;
     let _classExtraInitializers = [];
     let _classThis;

package/dist/XList/XList.js

@@ -4,50 +4,15 @@ import { __esDecorate, __runInitializers } from "tslib";
 // Licensed under the Apache License Version 2.0 that can be found in the
 // LICENSE file in the root directory of this source tree.
 */
-import { Component, genDomGetter, html } from '@lynx-js/web-elements-reactive';
+import { Component, genDomGetter } from '@lynx-js/web-elements-reactive';
 import { XListAttributes } from './XListAttributes.js';
 import { XListEvents } from './XListEvents.js';
 import { XListWaterfall } from './XListWaterfall.js';
 import { CommonEventsAndMethods } from '../common/CommonEventsAndMethods.js';
 import { commonComponentEventSetting } from '../common/commonEventInitConfiguration.js';
+import { templateXList } from '@lynx-js/web-elements-template';
 let XList = (() => {
-    let _classDecorators = [Component('x-list', [CommonEventsAndMethods, XListAttributes, XListEvents, XListWaterfall], html `<style>
-  .placeholder-dom {
-    display: none;
-    flex: 0 0 0;
-    align-self: stretch;
-    min-height: 0;
-    min-width: 0;
-  }
-  .observer-container {
-    flex-direction: inherit;
-    overflow: visible;
-  }
-  .observer {
-    display: flex;
-  }
-  </style>
-  <div id="content" part="content">
-    <div
-      class="observer-container placeholder-dom"
-      part="upper-threshold-observer"
-    >
-      <div
-        class="observer placeholder-dom"
-        id="upper-threshold-observer"
-      ></div>
-    </div>
-    <slot part="slot"></slot>
-    <div
-      class="observer-container placeholder-dom"
-      part="lower-threshold-observer"
-    >
-      <div
-        class="observer placeholder-dom"
-        id="lower-threshold-observer"
-      ></div>
-    </div>
-  </div>`)];
+    let _classDecorators = [Component('x-list', [CommonEventsAndMethods, XListAttributes, XListEvents, XListWaterfall], templateXList)];
     let _classDescriptor;
     let _classExtraInitializers = [];
     let _classThis;

package/dist/XList/XListAttributes.js

@@ -5,7 +5,6 @@ import { __esDecorate, __runInitializers } from "tslib";
 // LICENSE file in the root directory of this source tree.
 */
 import { bindToStyle, boostedQueueMicrotask, registerAttributeHandler, } from '@lynx-js/web-elements-reactive';
-const WATERFALL_SLOT = 'waterfall-slot';
 let XListAttributes = (() => {
     let _private_handlerStickyOffset_decorators;
     let _private_handlerStickyOffset_initializers = [];

package/dist/XList/XListWaterfall.d.ts

@@ -2,7 +2,6 @@ import { type AttributeReactiveClass } from '@lynx-js/web-elements-reactive';
 import type { XList } from './XList.js';
 export declare class XListWaterfall implements InstanceType<AttributeReactiveClass<typeof HTMLElement>> {
     #private;
-    static observedAttributes: never[];
+    static observedAttributes: string[];
     constructor(dom: XList);
-    connectedCallback(): void;
 }

package/dist/XList/XListWaterfall.js

@@ -1,144 +1,169 @@
+import { __esDecorate, __runInitializers, __setFunctionName } from "tslib";
 /*
 // Copyright 2024 The Lynx Authors. All rights reserved.
 // Licensed under the Apache License Version 2.0 that can be found in the
 // LICENSE file in the root directory of this source tree.
 */
-import { boostedQueueMicrotask, genDomGetter, } from '@lynx-js/web-elements-reactive';
+import { genDomGetter, registerAttributeHandler, } from '@lynx-js/web-elements-reactive';
 const WATERFALL_SLOT = 'waterfall-slot';
 const WATERFALL_STYLE = 'waterfall-style';
-export class XListWaterfall {
-    static observedAttributes = [];
-    #dom;
-    #getListContainer = genDomGetter(() => this.#dom.shadowRoot, '#content');
-    #getLowerThresholdObserver = genDomGetter(() => this.#dom.shadowRoot, 'div[part="lower-threshold-observer"]');
-    #resizeObserver;
-    #childrenObserver;
-    #createWaterfallContainer = () => {
-        const waterfallSlot = document.createElement('slot');
-        waterfallSlot.setAttribute('name', `${WATERFALL_SLOT}`);
-        this.#dom.shadowRoot?.querySelector('[part=upper-threshold-observer]')
-            ?.insertAdjacentElement('afterend', waterfallSlot);
-    };
-    #layoutListItem = (spanCount, isScrollVertical) => {
-        const measurements = new Array(spanCount).fill(0);
-        for (let i = 0; i < this.#dom.children.length; i++) {
-            const listItem = this.#dom.children[i];
-            const mainAxisGap = getComputedStyle(listItem).getPropertyValue('--list-main-axis-gap');
-            const crossAxisGap = getComputedStyle(listItem).getPropertyValue('--list-cross-axis-gap');
-            const increasedMeasurement = isScrollVertical
-                ? listItem.getBoundingClientRect().height + parseFloat(mainAxisGap)
-                : listItem.getBoundingClientRect().width + parseFloat(mainAxisGap);
-            if (listItem.getAttribute('full-span') !== null) {
-                let longestMeasurement = measurements[0];
-                // Find the longest track.
-                for (let j = 1; j < spanCount; j++) {
-                    if (measurements[j] > longestMeasurement) {
-                        longestMeasurement = measurements[j];
+let XListWaterfall = (() => {
+    let _instanceExtraInitializers = [];
+    let _private_handlerListType_decorators;
+    let _private_handlerListType_descriptor;
+    return class XListWaterfall {
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(null) : void 0;
+            _private_handlerListType_decorators = [registerAttributeHandler('list-type', true)];
+            __esDecorate(this, _private_handlerListType_descriptor = { value: __setFunctionName(function (newVal) {
+                    if (newVal === 'waterfall') {
+                        const spanCount = parseFloat(this.#dom.getAttribute('span-count')
+                            || this.#dom.getAttribute('column-count')
+                            || '') || 1;
+                        const scrollOrientation = this.#dom.getAttribute('scroll-orientation')
+                            || 'vertical';
+                        this.#createWaterfallContainer();
+                        if (!this.#resizeObserver) {
+                            this.#resizeObserverInit(spanCount, scrollOrientation === 'vertical');
+                        }
+                        if (!this.#childrenObserver) {
+                            this.#childrenObserver = new MutationObserver((mutationList) => {
+                                const mutation = mutationList?.[0];
+                                if (mutation?.type === 'childList') {
+                                    this.#resizeObserverInit(spanCount, scrollOrientation === 'vertical');
+                                }
+                            });
+                            this.#childrenObserver.observe(this.#dom, {
+                                childList: true,
+                            });
+                        }
+                    }
+                    else {
+                        this.#resizeObserver?.disconnect();
+                        this.#resizeObserver = undefined;
+                        this.#childrenObserver?.disconnect();
+                        this.#childrenObserver = undefined;
+                        for (let i = 0; i < this.#dom.children.length; i++) {
+                            const listItem = this.#dom.children[i];
+                            listItem.removeAttribute('slot');
+                        }
+                        this.#dom.shadowRoot?.querySelector(`slot[name=${WATERFALL_SLOT}]`)
+                            ?.remove();
+                    }
+                }, "#handlerListType") }, _private_handlerListType_decorators, { kind: "method", name: "#handlerListType", static: false, private: true, access: { has: obj => #handlerListType in obj, get: obj => obj.#handlerListType }, metadata: _metadata }, null, _instanceExtraInitializers);
+            if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+        }
+        static observedAttributes = ['list-type'];
+        #dom = __runInitializers(this, _instanceExtraInitializers);
+        #getListContainer = genDomGetter(() => this.#dom.shadowRoot, '#content');
+        #getLowerThresholdObserver = genDomGetter(() => this.#dom.shadowRoot, 'div[part="lower-threshold-observer"]');
+        #resizeObserver;
+        #childrenObserver;
+        #createWaterfallContainer = () => {
+            const waterfallSlot = document.createElement('slot');
+            waterfallSlot.setAttribute('name', `${WATERFALL_SLOT}`);
+            this.#dom.shadowRoot?.querySelector('[part=upper-threshold-observer]')
+                ?.insertAdjacentElement('afterend', waterfallSlot);
+        };
+        #layoutListItem = (spanCount, isScrollVertical) => {
+            const measurements = new Array(spanCount).fill(0);
+            for (let i = 0; i < this.#dom.children.length; i++) {
+                const listItem = this.#dom.children[i];
+                const mainAxisGap = getComputedStyle(listItem).getPropertyValue('--list-main-axis-gap');
+                const crossAxisGap = getComputedStyle(listItem).getPropertyValue('--list-cross-axis-gap');
+                const increasedMeasurement = isScrollVertical
+                    ? listItem.getBoundingClientRect().height + parseFloat(mainAxisGap)
+                    : listItem.getBoundingClientRect().width + parseFloat(mainAxisGap);
+                if (listItem.getAttribute('full-span') !== null) {
+                    let longestMeasurement = measurements[0];
+                    // Find the longest track.
+                    for (let j = 1; j < spanCount; j++) {
+                        if (measurements[j] > longestMeasurement) {
+                            longestMeasurement = measurements[j];
+                        }
+                    }
+                    for (let j = 0; j < spanCount; j++) {
+                        measurements[j] = longestMeasurement + increasedMeasurement;
+                    }
+                    if (isScrollVertical) {
+                        listItem.setAttribute(`${WATERFALL_STYLE}-left`, '0');
+                        listItem.setAttribute(`${WATERFALL_STYLE}-top`, `${longestMeasurement}px`);
+                    }
+                    else {
+                        listItem.setAttribute(`${WATERFALL_STYLE}-left`, `${longestMeasurement}px`);
+                        listItem.setAttribute(`${WATERFALL_STYLE}-top`, '0');
                     }
-                }
-                for (let j = 0; j < spanCount; j++) {
-                    measurements[j] = longestMeasurement + increasedMeasurement;
-                }
-                if (isScrollVertical) {
-                    listItem.setAttribute(`${WATERFALL_STYLE}-left`, '0');
-                    listItem.setAttribute(`${WATERFALL_STYLE}-top`, `${longestMeasurement}px`);
                 }
                 else {
-                    listItem.setAttribute(`${WATERFALL_STYLE}-left`, `${longestMeasurement}px`);
-                    listItem.setAttribute(`${WATERFALL_STYLE}-top`, '0');
-                }
-            }
-            else {
-                let shortestIndex = 0;
-                let shortestMeasurement = measurements[0];
-                // Find the shortest track.
-                for (let j = 1; j < spanCount; j++) {
-                    if (measurements[j] < shortestMeasurement) {
-                        shortestIndex = j;
-                        shortestMeasurement = measurements[j];
+                    let shortestIndex = 0;
+                    let shortestMeasurement = measurements[0];
+                    // Find the shortest track.
+                    for (let j = 1; j < spanCount; j++) {
+                        if (measurements[j] < shortestMeasurement) {
+                            shortestIndex = j;
+                            shortestMeasurement = measurements[j];
+                        }
                     }
+                    const crossOffset = `calc(${shortestIndex} * (100% - ${crossAxisGap} * (${spanCount} - 1))/ ${spanCount} + ${Math.max(0, shortestIndex)} * ${crossAxisGap})`;
+                    if (isScrollVertical) {
+                        listItem.setAttribute(`${WATERFALL_STYLE}-left`, crossOffset);
+                        listItem.setAttribute(`${WATERFALL_STYLE}-top`, `${shortestMeasurement}px`);
+                    }
+                    else {
+                        listItem.setAttribute(`${WATERFALL_STYLE}-left`, `${shortestMeasurement}px`);
+                        listItem.setAttribute(`${WATERFALL_STYLE}-top`, crossOffset);
+                    }
+                    measurements[shortestIndex] += increasedMeasurement;
                 }
-                const crossOffset = `calc(${shortestIndex} * (100% - ${crossAxisGap} * (${spanCount} - 1))/ ${spanCount} + ${Math.max(0, shortestIndex)} * ${crossAxisGap})`;
-                if (isScrollVertical) {
-                    listItem.setAttribute(`${WATERFALL_STYLE}-left`, crossOffset);
-                    listItem.setAttribute(`${WATERFALL_STYLE}-top`, `${shortestMeasurement}px`);
+            }
+            for (let i = 0; i < this.#dom.children.length; i++) {
+                const listItem = this.#dom.children[i];
+                listItem.style.setProperty('left', listItem.getAttribute(`${WATERFALL_STYLE}-left`));
+                listItem.style.setProperty('top', listItem.getAttribute(`${WATERFALL_STYLE}-top`));
+                listItem.setAttribute('slot', WATERFALL_SLOT);
+            }
+            // The reasons why it is not unified in #updateScrollToLowerEventSwitches is:
+            // It is impossible to ensure that list-item is not rendered, so it will cause incorrect listContent.scrollHeight/scrollWidth as height/width.
+            const enableScrollToLower = this.#dom.getAttribute('x-enable-scrolltolower-event');
+            if (enableScrollToLower !== null && enableScrollToLower !== 'false') {
+                const lower = this.#getLowerThresholdObserver();
+                const scrollOrientation = this.#dom.getAttribute('scroll-orientation')
+                    || 'vertical';
+                const listContent = this.#getListContainer();
+                if (scrollOrientation === 'vertical') {
+                    lower.style.setProperty('top', 
+                    // Firefox cannot trigger the bottom IntersectionObserver
+                    `${String(listContent.scrollHeight - 1)}px`, 'important');
+                    // Firefox needs this
+                    lower.style.setProperty('bottom', 'unset', 'important');
                 }
                 else {
-                    listItem.setAttribute(`${WATERFALL_STYLE}-left`, `${shortestMeasurement}px`);
-                    listItem.setAttribute(`${WATERFALL_STYLE}-top`, crossOffset);
+                    lower.style.setProperty('left', 
+                    // Firefox cannot trigger the bottom IntersectionObserver
+                    `${String(listContent.scrollHeight - 1)}px`);
+                    // Firefox needs this
+                    lower.style.setProperty('right', 'unset');
                 }
-                measurements[shortestIndex] += increasedMeasurement;
             }
+        };
+        constructor(dom) {
+            this.#dom = dom;
         }
-        for (let i = 0; i < this.#dom.children.length; i++) {
-            const listItem = this.#dom.children[i];
-            listItem.style.setProperty('left', listItem.getAttribute(`${WATERFALL_STYLE}-left`));
-            listItem.style.setProperty('top', listItem.getAttribute(`${WATERFALL_STYLE}-top`));
-            listItem.setAttribute('slot', WATERFALL_SLOT);
-        }
-        // The reasons why it is not unified in #updateScrollToLowerEventSwitches is:
-        // It is impossible to ensure that list-item is not rendered, so it will cause incorrect listContent.scrollHeight/scrollWidth as height/width.
-        const enableScrollToLower = this.#dom.getAttribute('x-enable-scrolltolower-event');
-        if (enableScrollToLower !== null && enableScrollToLower !== 'false') {
-            const lower = this.#getLowerThresholdObserver();
-            const scrollOrientation = this.#dom.getAttribute('scroll-orientation')
-                || 'vertical';
-            const listContent = this.#getListContainer();
-            if (scrollOrientation === 'vertical') {
-                lower.style.setProperty('top', 
-                // Firefox cannot trigger the bottom IntersectionObserver
-                `${String(listContent.scrollHeight - 1)}px`, 'important');
-                // Firefox needs this
-                lower.style.setProperty('bottom', 'unset', 'important');
-            }
-            else {
-                lower.style.setProperty('left', 
-                // Firefox cannot trigger the bottom IntersectionObserver
-                `${String(listContent.scrollHeight - 1)}px`);
-                // Firefox needs this
-                lower.style.setProperty('right', 'unset');
-            }
-        }
-    };
-    constructor(dom) {
-        this.#dom = dom;
-    }
-    #resizeObserverInit = (spanCount, isScrollVertical) => {
-        this.#resizeObserver?.disconnect();
-        this.#resizeObserver = new ResizeObserver(() => {
-            // may cause: Resizeobserver loop completed with undelivered notifications
-            // https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver#observation_errors
-            boostedQueueMicrotask(() => {
-                this.#layoutListItem(spanCount, isScrollVertical);
+        #resizeObserverInit = (spanCount, isScrollVertical) => {
+            this.#resizeObserver?.disconnect();
+            this.#resizeObserver = new ResizeObserver(() => {
+                // may cause: Resizeobserver loop completed with undelivered notifications
+                // https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver#observation_errors
+                requestAnimationFrame(() => {
+                    this.#layoutListItem(spanCount, isScrollVertical);
+                });
             });
-        });
-        Array.from(this.#dom.children).forEach(element => {
-            this.#resizeObserver?.observe(element);
-        });
+            Array.from(this.#dom.children).forEach(element => {
+                this.#resizeObserver?.observe(element);
+            });
+        };
+        get #handlerListType() { return _private_handlerListType_descriptor.value; }
     };
-    connectedCallback() {
-        if (this.#dom.getAttribute('list-type') === 'waterfall') {
-            const spanCount = parseFloat(this.#dom.getAttribute('span-count')
-                || this.#dom.getAttribute('column-count')
-                || '') || 1;
-            const scrollOrientation = this.#dom.getAttribute('scroll-orientation')
-                || 'vertical';
-            this.#createWaterfallContainer();
-            if (!this.#resizeObserver) {
-                this.#resizeObserverInit(spanCount, scrollOrientation === 'vertical');
-            }
-            if (!this.#childrenObserver) {
-                this.#childrenObserver = new MutationObserver((mutationList) => {
-                    const mutation = mutationList?.[0];
-                    if (mutation?.type === 'childList') {
-                        this.#resizeObserverInit(spanCount, scrollOrientation === 'vertical');
-                    }
-                });
-                this.#childrenObserver.observe(this.#dom, {
-                    childList: true,
-                });
-            }
-        }
-    }
-}
+})();
+export { XListWaterfall };
 //# sourceMappingURL=XListWaterfall.js.map

package/dist/XOverlayNg/XOverlayNg.js

@@ -4,27 +4,12 @@ import { __esDecorate, __runInitializers } from "tslib";
 // Licensed under the Apache License Version 2.0 that can be found in the
 // LICENSE file in the root directory of this source tree.
 */
+import { templateXOverlayNg } from '@lynx-js/web-elements-template';
 import { layoutChangeTarget, CommonEventsAndMethods, } from '../common/CommonEventsAndMethods.js';
 import { XOverlayAttributes } from './XOverlayAttributes.js';
-import { Component, html } from '@lynx-js/web-elements-reactive';
+import { Component } from '@lynx-js/web-elements-reactive';
 let XOverlayNg = (() => {
-    let _classDecorators = [Component('x-overlay-ng', [CommonEventsAndMethods, XOverlayAttributes], html `
-    <style>
-      #dialog[open] {
-        top: 0;
-        left: 0;
-        right: 0;
-        bottom: 0;
-        position: fixed;
-      }
-      #dialog::backdrop {
-        background-color: transparent;
-      }
-    </style>
-    <dialog id="dialog" part="dialog">
-      <slot></slot>
-    </dialog>
-  `)];
+    let _classDecorators = [Component('x-overlay-ng', [CommonEventsAndMethods, XOverlayAttributes], templateXOverlayNg)];
     let _classDescriptor;
     let _classExtraInitializers = [];
     let _classThis;

package/dist/XRefreshView/XRefreshView.js

@@ -4,59 +4,13 @@ import { __esDecorate, __runInitializers } from "tslib";
 // Licensed under the Apache License Version 2.0 that can be found in the
 // LICENSE file in the root directory of this source tree.
 */
-import { Component, genDomGetter, html } from '@lynx-js/web-elements-reactive';
+import { Component, genDomGetter } from '@lynx-js/web-elements-reactive';
 import { XRefreshViewEventsEmitter } from './XRefreshViewEventsEmitter.js';
 import { CommonEventsAndMethods } from '../common/CommonEventsAndMethods.js';
 import { scrollContainerDom } from '../common/constants.js';
+import { templateXRefreshView } from '@lynx-js/web-elements-template';
 let XRefreshView = (() => {
-    let _classDecorators = [Component('x-refresh-view', [CommonEventsAndMethods, XRefreshViewEventsEmitter], html `
-    <style>
-      .bounce-container {
-        overflow: scroll;
-        overscroll-behavior: contain;
-        scroll-snap-type: y mandatory;
-        scroll-behavior: smooth;
-        scrollbar-width: none;
-      }
-      .overflow-placeholder {
-        min-height: 30%;
-        min-width: 100%;
-        flex-shrink: 0;
-        scroll-snap-align: none;
-      }
-      .not-shrink {
-        height: 100%;
-        width: 100%;
-        min-height: 100%;
-        min-width: 100%;
-        flex-shrink: 0;
-      }
-      .vertical {
-        display: flex;
-        flex-direction: column;
-      }
-      #content {
-        scroll-snap-align: center;
-      }
-    </style>
-    <div id="container" part="container" class="bounce-container not-shrink vertical">
-      <div
-        id="placeholder-top"
-        class="overflow-placeholder bounce-item"
-        part="placeholder-top"
-      ></div>
-      <slot name="header"></slot>
-      <div id="content" part="content" class="not-shrink vertical">
-        <slot part="slot"></slot>
-      </div>
-      <slot name="footer"></slot>
-      <div
-        id="placeholder-bot"
-        class="overflow-placeholder bounce-item"
-        part="placeholder-bot"
-      ></div>
-    </div>
-  `)];
+    let _classDecorators = [Component('x-refresh-view', [CommonEventsAndMethods, XRefreshViewEventsEmitter], templateXRefreshView)];
     let _classDescriptor;
     let _classExtraInitializers = [];
     let _classThis;

package/dist/XSwiper/XSwiper.js

@@ -4,13 +4,14 @@ import { __esDecorate, __runInitializers } from "tslib";
 // Licensed under the Apache License Version 2.0 that can be found in the
 // LICENSE file in the root directory of this source tree.
 */
-import { Component, genDomGetter, html } from '@lynx-js/web-elements-reactive';
+import { Component, genDomGetter } from '@lynx-js/web-elements-reactive';
 import { XSwipeEvents } from './XSwiperEvents.js';
 import { XSwiperAutoScroll } from './XSwiperAutoScroll.js';
 import { XSwiperCircular } from './XSwiperCircular.js';
 import { XSwiperIndicator } from './XSwiperIndicator.js';
 import { CommonEventsAndMethods } from '../common/CommonEventsAndMethods.js';
 import { scrollContainerDom } from '../common/constants.js';
+import { templateXSwiper } from '@lynx-js/web-elements-template';
 let XSwiper = (() => {
     let _classDecorators = [Component('x-swiper', [
             CommonEventsAndMethods,
@@ -18,53 +19,7 @@ let XSwiper = (() => {
             XSwipeEvents,
             XSwiperCircular,
             XSwiperAutoScroll,
-        ], html ` <style>
-      #bounce-padding {
-        display: none;
-        flex: 0 0 0;
-        align-self: stretch;
-        scroll-snap-align: none;
-        flex-basis: 100%;
-      }
-      #content {
-        position: relative;
-        display: flex;
-        flex: 0 0 100%;
-        flex-direction: inherit;
-        flex-wrap: inherit;
-        align-self: stretch;
-        justify-content: inherit;
-        align-items: inherit;
-        overflow: inherit;
-        scrollbar-width: none;
-        scroll-snap-align: start;
-        scroll-snap-type: inherit;
-      }
-      div::-webkit-scrollbar {
-        display: none;
-      }
-      #indicator-container {
-        display: none;
-      }
-      @keyframes indicator-dot {
-        30%,
-        70% {
-          background-color: var(--indicator-color);
-        }
-        31%,
-        69% {
-          background-color: var(--indicator-active-color);
-        }
-      }
-    </style>
-    <style id="indicator-style"></style>
-    <div id="bounce-padding" part="bounce-padding"></div>
-    <div id="indicator-container" part="indicator-container"></div>
-    <div id="content" part="content">
-      <slot part="slot-start" name="circular-start" id="circular-start"></slot>
-      <slot part="slot"></slot>
-      <slot part="slot-end" name="circular-end" id="circular-end"></slot>
-    </div>`)];
+        ], templateXSwiper)];
     let _classDescriptor;
     let _classExtraInitializers = [];
     let _classThis;

package/dist/XText/InlineImage.js

@@ -4,7 +4,8 @@ import { __esDecorate, __runInitializers, __setFunctionName } from "tslib";
 // Licensed under the Apache License Version 2.0 that can be found in the
 // LICENSE file in the root directory of this source tree.
 */
-import { Component, genDomGetter, html, registerAttributeHandler, } from '@lynx-js/web-elements-reactive';
+import { Component, genDomGetter, registerAttributeHandler, } from '@lynx-js/web-elements-reactive';
+import { templateInlineImage } from '@lynx-js/web-elements-template';
 let InlineImageAttributes = (() => {
     let _instanceExtraInitializers = [];
     let _private_handleSrc_decorators;
@@ -35,7 +36,7 @@ export { InlineImageAttributes };
  * @deprecated you can use `x-image` instead in `x-text`.
  */
 let InlineImage = (() => {
-    let _classDecorators = [Component('inline-image', [InlineImageAttributes], html ` <img id="img" part="img" /> `)];
+    let _classDecorators = [Component('inline-image', [InlineImageAttributes], templateInlineImage({}))];
     let _classDescriptor;
     let _classExtraInitializers = [];
     let _classThis;

package/dist/XText/XText.js

@@ -4,12 +4,13 @@ import { __esDecorate, __runInitializers } from "tslib";
 // Licensed under the Apache License Version 2.0 that can be found in the
 // LICENSE file in the root directory of this source tree.
 */
-import { Component, html } from '@lynx-js/web-elements-reactive';
+import { Component } from '@lynx-js/web-elements-reactive';
 import { XTextTruncation } from './XTextTruncation.js';
 import { ScrollIntoView } from '../ScrollView/ScrollIntoView.js';
 import { CommonEventsAndMethods, layoutChangeTarget, } from '../common/CommonEventsAndMethods.js';
+import { templateXText } from '@lynx-js/web-elements-template';
 let XText = (() => {
-    let _classDecorators = [Component('x-text', [CommonEventsAndMethods, XTextTruncation], html `<div id="inner-box" part="inner-box"><slot part="slot"></slot><slot name="inline-truncation"></slot></div>`)];
+    let _classDecorators = [Component('x-text', [CommonEventsAndMethods, XTextTruncation], templateXText)];
     let _classDescriptor;
     let _classExtraInitializers = [];
     let _classThis;

package/dist/XTextarea/XTextarea.js

@@ -4,12 +4,13 @@ import { __esDecorate, __runInitializers } from "tslib";
 // Licensed under the Apache License Version 2.0 that can be found in the
 // LICENSE file in the root directory of this source tree.
 */
-import { Component, genDomGetter, html } from '@lynx-js/web-elements-reactive';
+import { Component, genDomGetter } from '@lynx-js/web-elements-reactive';
 import { Placeholder } from './Placeholder.js';
 import { TextareaBaseAttributes } from './TextareaBaseAttributes.js';
 import { XTextareaAttributes } from './XTextareaAttributes.js';
 import { XTextareaEvents } from './XTextareaEvents.js';
 import { CommonEventsAndMethods } from '../common/CommonEventsAndMethods.js';
+import { templateXTextarea } from '@lynx-js/web-elements-template';
 // x-textarea
 let XTextarea = (() => {
     let _classDecorators = [Component('x-textarea', [
@@ -18,16 +19,7 @@ let XTextarea = (() => {
             TextareaBaseAttributes,
             XTextareaAttributes,
             XTextareaEvents,
-        ], html `<style>
-      #textarea:focus,
-      #textarea:focus-visible {
-        border: inherit;
-        outline: inherit;
-      }
-    </style>
-    <form id="form" part="form" method="dialog">
-      <textarea id="textarea" part="textarea"></textarea>
-    </form> `)];
+        ], templateXTextarea)];
     let _classDescriptor;
     let _classExtraInitializers = [];
     let _classThis;

package/dist/XViewpagerNg/XViewpagerNg.js

@@ -4,40 +4,13 @@ import { __esDecorate, __runInitializers } from "tslib";
 // Licensed under the Apache License Version 2.0 that can be found in the
 // LICENSE file in the root directory of this source tree.
 */
-import { boostedQueueMicrotask, Component, html, } from '@lynx-js/web-elements-reactive';
+import { boostedQueueMicrotask, Component, } from '@lynx-js/web-elements-reactive';
 import { CommonEventsAndMethods } from '../common/CommonEventsAndMethods.js';
 import { XViewpagerNgEvents } from './XViewpagerNgEvents.js';
 import { scrollContainerDom } from '../common/constants.js';
+import { templateXViewpageNg } from '@lynx-js/web-elements-template';
 let XViewpagerNg = (() => {
-    let _classDecorators = [Component('x-viewpager-ng', [CommonEventsAndMethods, XViewpagerNgEvents], html `
-    <style>
-      #bounce-padding {
-        display: none;
-        flex: 0 0 0;
-        align-self: stretch;
-        scroll-snap-align: none;
-        flex-basis: 100%;
-      }
-      #content {
-        flex: 0 0 100%;
-        flex-direction: row;
-        align-self: stretch;
-        display: inherit;
-        justify-content: inherit;
-        align-items: inherit;
-        overflow: inherit;
-        scrollbar-width: none;
-        scroll-snap-type: inherit;
-      }
-      #content::-webkit-scrollbar {
-        display: none;
-      }
-    </style>
-    <div id="bounce-padding" part="bounce-padding"></div>
-    <div id="content" part="content">
-      <slot></slot>
-    </div>
-  `)];
+    let _classDecorators = [Component('x-viewpager-ng', [CommonEventsAndMethods, XViewpagerNgEvents], templateXViewpageNg)];
     let _classDescriptor;
     let _classExtraInitializers = [];
     let _classThis;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lynx-js/web-elements",
-  "version": "0.7.1",
+  "version": "0.7.3",
   "private": false,
   "repository": {
     "type": "git",
@@ -100,7 +100,8 @@
     "**/*.css"
   ],
   "dependencies": {
-    "@lynx-js/web-elements-reactive": "0.2.1"
+    "@lynx-js/web-elements-reactive": "0.2.2",
+    "@lynx-js/web-elements-template": "0.7.3"
   },
   "devDependencies": {
     "tslib": "^2.8.1"

package/src/XFoldViewNg/x-foldview-ng.css

@@ -9,7 +9,6 @@ x-foldview-ng {
   overflow-x: clip;
   overflow-x: hidden;
   overscroll-behavior: contain;
-  contain: content;
   --foldview-header-height: 0px;
   scrollbar-width: none;
 }

package/src/XImage/x-image.css

@@ -13,9 +13,7 @@ x-image, filter-image {
 }
 
 x-image > *,
-filter-image > *,
-x-image:not(:defined),
-filter-image:not(:defined) {
+filter-image > * {
   display: none;
 }
 

package/src/XInput/x-input.css

@@ -4,10 +4,6 @@
 // LICENSE file in the root directory of this source tree.
 */
 x-input {
-  display: none;
-}
-
-x-input:defined {
   display: contents;
 }
 

package/src/XList/x-list.css

@@ -59,6 +59,7 @@ list-item {
   display: none;
   content-visibility: auto;
   flex: 0 0 auto !important;
+  position: static;
 }
 
 x-list > list-item, x-list > lynx-wrapper > list-item {

package/src/XOverlayNg/x-overlay-ng.css

@@ -3,9 +3,6 @@
 // Licensed under the Apache License Version 2.0 that can be found in the
 // LICENSE file in the root directory of this source tree.
 */
-x-overlay-ng:not(:defined) {
-  display: none;
-}
 x-overlay-ng::part(dialog) {
   padding: 0;
   border: 0;

package/src/XRefreshView/x-refresh-view.css

@@ -18,9 +18,6 @@ x-refresh-view {
   min-height: 0;
   border-style: solid;
 }
-x-refresh-view:not(:defined) {
-  display: none;
-}
 
 x-refresh-view::part(container),
 x-refresh-view::part(content),

package/src/XText/x-text.css

@@ -15,9 +15,6 @@ x-text:not(x-text > x-text):not(x-text > lynx-wrapper > x-text) {
   --lynx-color: canvastext;
   --lynx-text-bg-color: initial;
 }
-x-text:not(:defined) {
-  display: none;
-}
 
 x-text > * {
   display: none;
@@ -41,36 +38,35 @@ inline-text, inline-image, inline-truncation {
 }
 
 /* nested components */
-x-text > x-text:defined,
-x-text > inline-text:defined,
-x-text > x-text:defined,
-inline-text > inline-text:defined,
-inline-truncation > inline-text:defined,
-inline-truncation > x-text:defined,
-x-text > lynx-wrapper > x-text:defined,
-x-text > lynx-wrapper > inline-text:defined,
-x-text > lynx-wrapper > x-text:defined,
-inline-text > lynx-wrapper > inline-text:defined,
-x-text > lynx-wrapper > x:defined,
-inline-truncation > lynx-wrapper > inline-text:defined,
-inline-truncation > lynx-wrapper > x-text:defined {
+x-text > x-text,
+x-text > inline-text,
+inline-text > inline-text,
+inline-truncation > inline-text,
+inline-truncation > x-text,
+x-text > lynx-wrapper > x-text,
+x-text > lynx-wrapper > inline-text,
+x-text > lynx-wrapper > x-text,
+inline-text > lynx-wrapper > inline-text,
+x-text > lynx-wrapper > *,
+inline-truncation > lynx-wrapper > inline-text,
+inline-truncation > lynx-wrapper > x-text {
   display: inline;
   background-clip: inherit;
   -webkit-background-clip: inherit;
 }
 
-x-text > inline-image:defined,
-x-text > x-image:defined,
-inline-truncation > inline-image:defined,
-inline-truncation > x-image:defined,
-inline-text > inline-image:defined,
-inline-text > x-image:defined,
-x-text > lynx-wrapper > inline-image:defined,
-x-text > lynx-wrapper > x-image:defined,
-inline-truncation > lynx-wrapper > inline-image:defined,
-inline-truncation > lynx-wrapper > x-image:defined,
-inline-text > lynx-wrapper > inline-image:defined,
-inline-text > lynx-wrapper > x-image:defined {
+x-text > inline-image,
+x-text > x-image,
+inline-truncation > inline-image,
+inline-truncation > x-image,
+inline-text > inline-image,
+inline-text > x-image,
+x-text > lynx-wrapper > inline-image,
+x-text > lynx-wrapper > x-image,
+inline-truncation > lynx-wrapper > inline-image,
+inline-truncation > lynx-wrapper > x-image,
+inline-text > lynx-wrapper > inline-image,
+inline-text > lynx-wrapper > x-image {
   display: contents !important;
 }
 x-text > x-view, x-text > lynx-wrapper > x-view {
@@ -230,7 +226,7 @@ x-text[text-maxline][tail-color-convert="false"]::part(inner-box) {
 }
 
 raw-text {
-  display: none;
+  display: none; /* raw-text only works in x-text */
   white-space-collapse: preserve-breaks;
 }
 x-text > raw-text,
@@ -239,3 +235,8 @@ x-text > lynx-wrapper > raw-text,
 inline-text > lynx-wrapper > raw-text {
   display: contents !important;
 }
+
+raw-text:not(:defined)::before {
+  content: attr(text);
+  display: contents;
+}

package/src/XTextarea/x-textarea.css

@@ -4,10 +4,6 @@
 // LICENSE file in the root directory of this source tree.
 */
 x-textarea {
-  display: none;
-}
-
-x-textarea:defined {
   display: contents;
 }
 

package/src/XViewpagerNg/x-viewpager-ng.css

@@ -7,9 +7,9 @@ x-viewpager-ng, x-viewpager-item-ng {
   display: none;
 }
 
-x-viewpager-ng:defined,
-x-viewpager-ng > x-viewpager-item-ng:defined,
-x-viewpager-ng > lynx-wrapper > x-viewpager-item-ng:defined {
+x-viewpager-ng,
+x-viewpager-ng > x-viewpager-item-ng,
+x-viewpager-ng > lynx-wrapper > x-viewpager-item-ng {
   display: flex;
 }
 

package/src/common-css/linear.css

@@ -146,7 +146,8 @@ x-refresh-header,
 x-refresh-view,
 x-swiper-item,
 x-viewpager-item-ng,
-x-viewpager-ng {
+x-viewpager-ng,
+list-item {
   /*
   --lynx-display-toggle is compile-time generated.
   */
@@ -195,7 +196,8 @@ x-refresh-header,
 x-refresh-view,
 x-swiper-item,
 x-viewpager-item-ng,
-x-viewpager-ng {
+x-viewpager-ng,
+list-item {
   flex-wrap: var(--lynx-display-linear, nowrap)
     var(
       --lynx-display-flex,