@lynx-js/web-elements-canary 0.7.2 → 0.7.3-canary-20250520-9d7cf2d4

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @lynx-js/web-elements
 
+## 0.7.3-canary-20250520105306-9d7cf2d4000dfaa0e0e836992110966f7ddbbb87
+
+### 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: 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-canary-20250520105306-9d7cf2d4000dfaa0e0e836992110966f7ddbbb87
+
 ## 0.7.2
 
 ### Patch Changes
@@ -411,8 +426,8 @@
   For compating usage, `@lynx-js/web-elements-compat/LinearContainer` is provided.
 
   ```javascript
-  import '@lynx-js/web-elements-compat/LinearContainer';
-  import '@lynx-js/web-elements/all';
+  import "@lynx-js/web-elements-compat/LinearContainer";
+  import "@lynx-js/web-elements/all";
   ```
 
 - f8d1d98: break: rename the `blur` and `focus` event to `lynxblur` and `lynxfocus` for x-input element
@@ -434,11 +449,11 @@
   There is also a simple way to use this feature
 
   ```javascript
-  import { LynxCard } from '@lynx-js/web-core';
-  import { loadElement } from '@lynx-js/web-elements/lazy';
-  import '@lynx-js/web-elements/index.css';
-  import '@lynx-js/web-core/index.css';
-  import './index.css';
+  import { LynxCard } from "@lynx-js/web-core";
+  import { loadElement } from "@lynx-js/web-elements/lazy";
+  import "@lynx-js/web-elements/index.css";
+  import "@lynx-js/web-core/index.css";
+  import "./index.css";
 
   const lynxcard = new LynxCard({
     ...beforeConfigs,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lynx-js/web-elements-canary",
-  "version": "0.7.2",
+  "version": "0.7.3-canary-20250520-9d7cf2d4",
   "private": false,
   "repository": {
     "type": "git",
@@ -101,7 +101,7 @@
   ],
   "dependencies": {
     "@lynx-js/web-elements-reactive": "npm:@lynx-js/web-elements-reactive-canary@0.2.2",
-    "@lynx-js/web-elements-template": "npm:@lynx-js/web-elements-template-canary@0.7.2"
+    "@lynx-js/web-elements-template": "npm:@lynx-js/web-elements-template-canary@0.7.3-canary-20250520-9d7cf2d4"
   },
   "devDependencies": {
     "tslib": "^2.8.1"

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/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,