diff --git a/.changeset/fine-baboons-teach.md b/.changeset/fine-baboons-teach.md
new file mode 100644
index 0000000000..c815408fbc
--- /dev/null
+++ b/.changeset/fine-baboons-teach.md
@@ -0,0 +1,8 @@
+---
+"@lynx-js/web-style-transformer": patch
+"@lynx-js/web-elements": minor
+---
+
+feat: 1. list adds support for the `sticky` attribute. Now sticky-offset, sticky-top, and sticky-bottom will only take effect when `sticky` is `true`.
+
+2. Added support for `list-main-axis-gap`, `list-cross-axis-gap`.
diff --git a/packages/web-platform/web-elements/src/XList/x-list.css b/packages/web-platform/web-elements/src/XList/x-list.css
index b9a024ee1a..ad4e2c82fd 100644
--- a/packages/web-platform/web-elements/src/XList/x-list.css
+++ b/packages/web-platform/web-elements/src/XList/x-list.css
@@ -8,6 +8,8 @@ x-list {
   scrollbar-width: none;
   --list-item-sticky-offset: 0;
   --list-item-span-count: 0;
+  --list-main-axis-gap: 0;
+  --list-cross-axis-gap: 0;
 }
 
 x-list > *:not(list-item) {
@@ -29,6 +31,8 @@ x-list::part(content) {
   overflow: inherit;
   position: relative;
   content-visibility: auto;
+  row-gap: inherit;
+  column-gap: inherit;
 }
 
 x-list::part(content), x-list::part(slot) {
@@ -79,28 +83,33 @@ x-list[scroll-orientation="horizontal"][enable-scroll="false"] {
   overflow-x: hidden !important;
 }
 
-list-item[sticky-top], list-item[sticky-bottom] {
+x-list[sticky="true"] list-item[sticky-top],
+x-list[sticky="true"] list-item[sticky-bottom] {
   position: sticky;
   z-index: 1;
 }
 
-x-list > list-item[sticky-top], x-list > lynx-wrapper > list-item[sticky-top] {
+x-list[sticky="true"] > list-item[sticky-top],
+x-list[sticky="true"] > lynx-wrapper > list-item[sticky-top] {
   top: var(--list-item-sticky-offset);
 }
 
-x-list > list-item[sticky-bottom],
-x-list > lynx-wrapper > list-item[sticky-bottom] {
+x-list[sticky="true"] > list-item[sticky-bottom],
+x-list[sticky="true"] > lynx-wrapper > list-item[sticky-bottom] {
   bottom: var(--list-item-sticky-offset);
 }
 
-x-list[scroll-orientation="horizontal"] > list-item[sticky-top],
-x-list[scroll-orientation="horizontal"] > lynx-wrapper > list-item[sticky-top] {
+x-list[sticky="true"][scroll-orientation="horizontal"] > list-item[sticky-top],
+x-list[sticky="true"][scroll-orientation="horizontal"]
+  > lynx-wrapper
+  > list-item[sticky-top] {
   top: unset;
   left: var(--list-item-sticky-offset);
 }
 
-x-list[scroll-orientation="horizontal"] > list-item[sticky-bottom],
-x-list[scroll-orientation="horizontal"]
+x-list[sticky="true"][scroll-orientation="horizontal"]
+  > list-item[sticky-bottom],
+x-list[sticky="true"][scroll-orientation="horizontal"]
   > lynx-wrapper
   > list-item[sticky-bottom] {
   bottom: unset;
@@ -141,10 +150,14 @@ x-list[list-type="single"] {
   display: flex;
   flex-direction: column;
   align-items: stretch;
+  row-gap: var(--list-main-axis-gap);
+  column-gap: var(--list-cross-axis-gap);
 }
 
 x-list[list-type="single"][scroll-orientation="horizontal"] {
   flex-direction: row;
+  row-gap: var(--list-cross-axis-gap);
+  column-gap: var(--list-main-axis-gap);
 }
 
 /* list-type flow */
@@ -154,6 +167,8 @@ x-list[list-type="flow"]::part(content) {
   grid-auto-rows: min-content;
   justify-items: stretch;
   align-items: start;
+  grid-row-gap: var(--list-main-axis-gap);
+  grid-column-gap: var(--list-cross-axis-gap);
 }
 
 x-list[list-type="flow"][scroll-orientation="horizontal"]::part(content) {
@@ -162,6 +177,8 @@ x-list[list-type="flow"][scroll-orientation="horizontal"]::part(content) {
   grid-auto-columns: min-content;
   justify-items: start;
   align-items: stretch;
+  grid-row-gap: var(--list-cross-axis-gap);
+  grid-column-gap: var(--list-main-axis-gap);
 }
 
 x-list[list-type="flow"] list-item[full-span]:not([full-span="false"]) {
diff --git a/packages/web-platform/web-style-transformer/src/transformLynxStyles.ts b/packages/web-platform/web-style-transformer/src/transformLynxStyles.ts
index 9ba258f68f..facfa1dc5c 100644
--- a/packages/web-platform/web-style-transformer/src/transformLynxStyles.ts
+++ b/packages/web-platform/web-style-transformer/src/transformLynxStyles.ts
@@ -268,6 +268,12 @@ const renameRules: {
   'flex-basis': [
     '--flex-basis',
   ],
+  'list-main-axis-gap': [
+    '--list-main-axis-gap',
+  ],
+  'list-cross-axis-gap': [
+    '--list-cross-axis-gap',
+  ],
 };
 export function transformLynxStyles(
   hypenNameStyles: [string, string][],
diff --git a/packages/web-platform/web-tests/tests/web-elements.spec.ts b/packages/web-platform/web-tests/tests/web-elements.spec.ts
index 1b62648473..0f58e0ade5 100644
--- a/packages/web-platform/web-tests/tests/web-elements.spec.ts
+++ b/packages/web-platform/web-tests/tests/web-elements.spec.ts
@@ -2053,7 +2053,17 @@ test.describe('web-elements test suite', () => {
       await page.mouse.wheel(0, 500);
       await diffScreenShot(page, title, 'sticky-y-scroll');
     });
-    test('full-span', async ({ page, browserName }, { titlePath }) => {
+    test('full-span', async ({ page }, { titlePath }) => {
+      const title = getTitle(titlePath);
+      await gotoWebComponentPage(page, title);
+      await diffScreenShot(page, title, 'index');
+    });
+    test('axis-gap', async ({ page }, { titlePath }) => {
+      const title = getTitle(titlePath);
+      await gotoWebComponentPage(page, title);
+      await diffScreenShot(page, title, 'index');
+    });
+    test('axis-gap-flow', async ({ page }, { titlePath }) => {
       const title = getTitle(titlePath);
       await gotoWebComponentPage(page, title);
       await diffScreenShot(page, title, 'index');
diff --git a/packages/web-platform/web-tests/tests/web-elements.spec.ts-snapshots/x-list/axis-gap-flow/index-chromium-linux.png b/packages/web-platform/web-tests/tests/web-elements.spec.ts-snapshots/x-list/axis-gap-flow/index-chromium-linux.png
new file mode 100644
index 0000000000..d114ec9aa2
Binary files /dev/null and b/packages/web-platform/web-tests/tests/web-elements.spec.ts-snapshots/x-list/axis-gap-flow/index-chromium-linux.png differ
diff --git a/packages/web-platform/web-tests/tests/web-elements.spec.ts-snapshots/x-list/axis-gap-flow/index-firefox-linux.png b/packages/web-platform/web-tests/tests/web-elements.spec.ts-snapshots/x-list/axis-gap-flow/index-firefox-linux.png
new file mode 100644
index 0000000000..c1a979e2dd
Binary files /dev/null and b/packages/web-platform/web-tests/tests/web-elements.spec.ts-snapshots/x-list/axis-gap-flow/index-firefox-linux.png differ
diff --git a/packages/web-platform/web-tests/tests/web-elements.spec.ts-snapshots/x-list/axis-gap-flow/index-webkit-linux.png b/packages/web-platform/web-tests/tests/web-elements.spec.ts-snapshots/x-list/axis-gap-flow/index-webkit-linux.png
new file mode 100644
index 0000000000..f8afda04a1
Binary files /dev/null and b/packages/web-platform/web-tests/tests/web-elements.spec.ts-snapshots/x-list/axis-gap-flow/index-webkit-linux.png differ
diff --git a/packages/web-platform/web-tests/tests/web-elements.spec.ts-snapshots/x-list/axis-gap/index-chromium-linux.png b/packages/web-platform/web-tests/tests/web-elements.spec.ts-snapshots/x-list/axis-gap/index-chromium-linux.png
new file mode 100644
index 0000000000..6109c98c20
Binary files /dev/null and b/packages/web-platform/web-tests/tests/web-elements.spec.ts-snapshots/x-list/axis-gap/index-chromium-linux.png differ
diff --git a/packages/web-platform/web-tests/tests/web-elements.spec.ts-snapshots/x-list/axis-gap/index-firefox-linux.png b/packages/web-platform/web-tests/tests/web-elements.spec.ts-snapshots/x-list/axis-gap/index-firefox-linux.png
new file mode 100644
index 0000000000..c2e3842364
Binary files /dev/null and b/packages/web-platform/web-tests/tests/web-elements.spec.ts-snapshots/x-list/axis-gap/index-firefox-linux.png differ
diff --git a/packages/web-platform/web-tests/tests/web-elements.spec.ts-snapshots/x-list/axis-gap/index-webkit-linux.png b/packages/web-platform/web-tests/tests/web-elements.spec.ts-snapshots/x-list/axis-gap/index-webkit-linux.png
new file mode 100644
index 0000000000..135a417268
Binary files /dev/null and b/packages/web-platform/web-tests/tests/web-elements.spec.ts-snapshots/x-list/axis-gap/index-webkit-linux.png differ
diff --git a/packages/web-platform/web-tests/tests/web-elements/x-list/axis-gap-flow.html b/packages/web-platform/web-tests/tests/web-elements/x-list/axis-gap-flow.html
new file mode 100644
index 0000000000..217029d65c
--- /dev/null
+++ b/packages/web-platform/web-tests/tests/web-elements/x-list/axis-gap-flow.html
@@ -0,0 +1,171 @@
+<!DOCTYPE html>
+<!-- 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. -->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>web playground</title>
+    <meta content="yes" name="apple-mobile-web-app-capable">
+    <meta content="default" name="apple-mobile-web-app-status-bar-style">
+    <meta content="telephone=no" name="format-detection">
+    <meta content="portrait" name="screen-orientation">
+    <meta
+      content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"
+      name="viewport"
+    >
+    <meta content="portrait" name="x5-orientation">
+    <link
+      href="/node_modules/@lynx-js/web-elements/index.css"
+      rel="stylesheet"
+    />
+    <link
+      href="/web-elements.css"
+      rel="stylesheet"
+    />
+
+    <style>
+    @import url("../../common.css");
+    x-list {
+      width: 100%;
+      height: 500px;
+    }
+
+    .item {
+      border-width: 5px;
+      border-color: green;
+      width: 100%;
+      height: 100%;
+      background-color: yellow;
+    }
+
+    #vertical {
+      .left {
+        height: 80px;
+      }
+
+      .right {
+        height: 100px;
+      }
+    }
+
+    #horizontal {
+      .left {
+        width: 300px;
+      }
+
+      .right {
+        width: 500px;
+      }
+    }
+    </style>
+  </head>
+
+  <body>
+    <script src="/web-elements.js" defer></script>
+    <x-view class="page" style="flex-direction: column;">
+      <x-list
+        list-type="flow"
+        span-count="2"
+        id="vertical"
+        style="--list-main-axis-gap: 10px; --list-cross-axis-gap: 20px"
+      >
+        <list-item
+          class="left"
+          item-key="1"
+          id="1"
+        ><x-view class="item">1</x-view></list-item>
+        <list-item class="right" item-key="2" id="2"><x-view class="item"
+          >2</x-view></list-item>
+        <list-item class="left" item-key="3" id="3"><x-view class="item"
+          >3</x-view></list-item>
+        <list-item class="right" item-key="4" id="4"><x-view class="item"
+          >4</x-view></list-item>
+        <list-item class="left" item-key="5" id="5"><x-view class="item"
+          >5</x-view></list-item>
+        <list-item class="right" item-key="6" id="6"><x-view class="item"
+          >6</x-view></list-item>
+        <list-item class="left" item-key="7" id="7"><x-view class="item"
+          >7</x-view></list-item>
+        <list-item class="right" item-key="8" id="8"><x-view class="item"
+          >8</x-view></list-item>
+        <list-item class="left" item-key="9" id="9"><x-view class="item"
+          >9</x-view></list-item>
+        <list-item class="right" item-key="10" id="10"><x-view class="item"
+          >10</x-view></list-item>
+        <list-item class="left" item-key="11" id="11"><x-view class="item"
+          >11</x-view></list-item>
+        <list-item class="right" item-key="12" id="12"><x-view class="item"
+          >12</x-view></list-item>
+        <list-item class="left" item-key="13" id="13"><x-view class="item"
+          >13</x-view></list-item>
+        <list-item class="right" item-key="14" id="14"><x-view class="item"
+          >14</x-view></list-item>
+        <list-item class="left" item-key="15" id="15"><x-view class="item"
+          >15</x-view></list-item>
+        <list-item class="right" item-key="16" id="16"><x-view class="item"
+          >16</x-view></list-item>
+        <list-item class="left" item-key="17" id="17"><x-view class="item"
+          >17</x-view></list-item>
+        <list-item class="right" item-key="18" id="18"><x-view class="item"
+          >18</x-view></list-item>
+        <list-item class="left" item-key="19" id="19"><x-view class="item"
+          >19</x-view></list-item>
+        <list-item class="right" item-key="20" id="20"><x-view class="item"
+          >20</x-view></list-item>
+      </x-list>
+
+      <x-list
+        list-type="flow"
+        span-count="2"
+        id="horizontal"
+        scroll-orientation="horizontal"
+        style="--list-main-axis-gap: 10px; --list-cross-axis-gap: 20px"
+      >
+        <list-item
+          class="left"
+          item-key="1"
+          id="1"
+        ><x-view class="item">1</x-view></list-item>
+        <list-item class="right" item-key="2" id="2"><x-view class="item"
+          >2</x-view></list-item>
+        <list-item class="left" item-key="3" id="3"><x-view class="item"
+          >3</x-view></list-item>
+        <list-item class="right" item-key="4" id="4"><x-view class="item"
+          >4</x-view></list-item>
+        <list-item class="left" item-key="5" id="5"><x-view class="item"
+          >5</x-view></list-item>
+        <list-item class="right" item-key="6" id="6"><x-view class="item"
+          >6</x-view></list-item>
+        <list-item class="left" item-key="7" id="7"><x-view class="item"
+          >7</x-view></list-item>
+        <list-item class="right" item-key="8" id="8"><x-view class="item"
+          >8</x-view></list-item>
+        <list-item class="left" item-key="9" id="9"><x-view class="item"
+          >9</x-view></list-item>
+        <list-item class="right" item-key="10" id="10"><x-view class="item"
+          >10</x-view></list-item>
+        <list-item class="left" item-key="11" id="11"><x-view class="item"
+          >11</x-view></list-item>
+        <list-item class="right" item-key="12" id="12"><x-view class="item"
+          >12</x-view></list-item>
+        <list-item class="left" item-key="13" id="13"><x-view class="item"
+          >13</x-view></list-item>
+        <list-item class="right" item-key="14" id="14"><x-view class="item"
+          >14</x-view></list-item>
+        <list-item class="left" item-key="15" id="15"><x-view class="item"
+          >15</x-view></list-item>
+        <list-item class="right" item-key="16" id="16"><x-view class="item"
+          >16</x-view></list-item>
+        <list-item class="left" item-key="17" id="17"><x-view class="item"
+          >17</x-view></list-item>
+        <list-item class="right" item-key="18" id="18"><x-view class="item"
+          >18</x-view></list-item>
+        <list-item class="left" item-key="19" id="19"><x-view class="item"
+          >19</x-view></list-item>
+        <list-item class="right" item-key="20" id="20"><x-view class="item"
+          >20</x-view></list-item>
+      </x-list>
+    </x-view>
+  </body>
+</html>
diff --git a/packages/web-platform/web-tests/tests/web-elements/x-list/axis-gap.html b/packages/web-platform/web-tests/tests/web-elements/x-list/axis-gap.html
new file mode 100644
index 0000000000..ce31e9fe52
--- /dev/null
+++ b/packages/web-platform/web-tests/tests/web-elements/x-list/axis-gap.html
@@ -0,0 +1,169 @@
+<!DOCTYPE html>
+<!-- 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. -->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>web playground</title>
+    <meta content="yes" name="apple-mobile-web-app-capable">
+    <meta content="default" name="apple-mobile-web-app-status-bar-style">
+    <meta content="telephone=no" name="format-detection">
+    <meta content="portrait" name="screen-orientation">
+    <meta
+      content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"
+      name="viewport"
+    >
+    <meta content="portrait" name="x5-orientation">
+    <link
+      href="/node_modules/@lynx-js/web-elements/index.css"
+      rel="stylesheet"
+    />
+    <link
+      href="/web-elements.css"
+      rel="stylesheet"
+    />
+
+    <style>
+    @import url("../../common.css");
+    x-list {
+      width: 100%;
+      height: 500px;
+    }
+
+    .item {
+      border-width: 5px;
+      border-color: green;
+      width: 100%;
+      height: 100%;
+      background-color: yellow;
+    }
+
+    #vertical {
+      .left {
+        height: 80px;
+      }
+
+      .right {
+        height: 100px;
+      }
+    }
+
+    #horizontal {
+      .left {
+        width: 300px;
+      }
+
+      .right {
+        width: 500px;
+      }
+    }
+    </style>
+  </head>
+
+  <body>
+    <script src="/web-elements.js" defer></script>
+    <x-view class="page" style="flex-direction: column;">
+      <x-list
+        list-type="single"
+        id="vertical"
+        style="--list-main-axis-gap: 10px; --list-cross-axis-gap: 20px"
+      >
+        <list-item
+          class="left"
+          item-key="1"
+          id="1"
+        ><x-view class="item">1</x-view></list-item>
+        <list-item class="right" item-key="2" id="2"><x-view class="item"
+          >2</x-view></list-item>
+        <list-item class="left" item-key="3" id="3"><x-view class="item"
+          >3</x-view></list-item>
+        <list-item class="right" item-key="4" id="4"><x-view class="item"
+          >4</x-view></list-item>
+        <list-item class="left" item-key="5" id="5"><x-view class="item"
+          >5</x-view></list-item>
+        <list-item class="right" item-key="6" id="6"><x-view class="item"
+          >6</x-view></list-item>
+        <list-item class="left" item-key="7" id="7"><x-view class="item"
+          >7</x-view></list-item>
+        <list-item class="right" item-key="8" id="8"><x-view class="item"
+          >8</x-view></list-item>
+        <list-item class="left" item-key="9" id="9"><x-view class="item"
+          >9</x-view></list-item>
+        <list-item class="right" item-key="10" id="10"><x-view class="item"
+          >10</x-view></list-item>
+        <list-item class="left" item-key="11" id="11"><x-view class="item"
+          >11</x-view></list-item>
+        <list-item class="right" item-key="12" id="12"><x-view class="item"
+          >12</x-view></list-item>
+        <list-item class="left" item-key="13" id="13"><x-view class="item"
+          >13</x-view></list-item>
+        <list-item class="right" item-key="14" id="14"><x-view class="item"
+          >14</x-view></list-item>
+        <list-item class="left" item-key="15" id="15"><x-view class="item"
+          >15</x-view></list-item>
+        <list-item class="right" item-key="16" id="16"><x-view class="item"
+          >16</x-view></list-item>
+        <list-item class="left" item-key="17" id="17"><x-view class="item"
+          >17</x-view></list-item>
+        <list-item class="right" item-key="18" id="18"><x-view class="item"
+          >18</x-view></list-item>
+        <list-item class="left" item-key="19" id="19"><x-view class="item"
+          >19</x-view></list-item>
+        <list-item class="right" item-key="20" id="20"><x-view class="item"
+          >20</x-view></list-item>
+      </x-list>
+
+      <x-list
+        list-type="single"
+        id="horizontal"
+        scroll-orientation="horizontal"
+        style="--list-main-axis-gap: 10px; --list-cross-axis-gap: 20px"
+      >
+        <list-item
+          class="left"
+          item-key="1"
+          id="1"
+        ><x-view class="item">1</x-view></list-item>
+        <list-item class="right" item-key="2" id="2"><x-view class="item"
+          >2</x-view></list-item>
+        <list-item class="left" item-key="3" id="3"><x-view class="item"
+          >3</x-view></list-item>
+        <list-item class="right" item-key="4" id="4"><x-view class="item"
+          >4</x-view></list-item>
+        <list-item class="left" item-key="5" id="5"><x-view class="item"
+          >5</x-view></list-item>
+        <list-item class="right" item-key="6" id="6"><x-view class="item"
+          >6</x-view></list-item>
+        <list-item class="left" item-key="7" id="7"><x-view class="item"
+          >7</x-view></list-item>
+        <list-item class="right" item-key="8" id="8"><x-view class="item"
+          >8</x-view></list-item>
+        <list-item class="left" item-key="9" id="9"><x-view class="item"
+          >9</x-view></list-item>
+        <list-item class="right" item-key="10" id="10"><x-view class="item"
+          >10</x-view></list-item>
+        <list-item class="left" item-key="11" id="11"><x-view class="item"
+          >11</x-view></list-item>
+        <list-item class="right" item-key="12" id="12"><x-view class="item"
+          >12</x-view></list-item>
+        <list-item class="left" item-key="13" id="13"><x-view class="item"
+          >13</x-view></list-item>
+        <list-item class="right" item-key="14" id="14"><x-view class="item"
+          >14</x-view></list-item>
+        <list-item class="left" item-key="15" id="15"><x-view class="item"
+          >15</x-view></list-item>
+        <list-item class="right" item-key="16" id="16"><x-view class="item"
+          >16</x-view></list-item>
+        <list-item class="left" item-key="17" id="17"><x-view class="item"
+          >17</x-view></list-item>
+        <list-item class="right" item-key="18" id="18"><x-view class="item"
+          >18</x-view></list-item>
+        <list-item class="left" item-key="19" id="19"><x-view class="item"
+          >19</x-view></list-item>
+        <list-item class="right" item-key="20" id="20"><x-view class="item"
+          >20</x-view></list-item>
+      </x-list>
+    </x-view>
+  </body>
+</html>
diff --git a/packages/web-platform/web-tests/tests/web-elements/x-list/sticky-flow.html b/packages/web-platform/web-tests/tests/web-elements/x-list/sticky-flow.html
index 3846eab443..958d79b437 100644
--- a/packages/web-platform/web-tests/tests/web-elements/x-list/sticky-flow.html
+++ b/packages/web-platform/web-tests/tests/web-elements/x-list/sticky-flow.html
@@ -53,7 +53,7 @@
   <body>
     <script src="/web-elements.js" defer></script>
     <x-view class="page" style="flex-direction: column;">
-      <x-list list-type="flow" span-count="2">
+      <x-list list-type="flow" span-count="2" sticky="true">
         <list-item
           class="left"
           item-key="1"
diff --git a/packages/web-platform/web-tests/tests/web-elements/x-list/sticky-offset.html b/packages/web-platform/web-tests/tests/web-elements/x-list/sticky-offset.html
index decb24af99..3181118110 100644
--- a/packages/web-platform/web-tests/tests/web-elements/x-list/sticky-offset.html
+++ b/packages/web-platform/web-tests/tests/web-elements/x-list/sticky-offset.html
@@ -44,7 +44,7 @@
   <body>
     <script src="/web-elements.js" defer></script>
     <x-view class="page">
-      <x-list list-type="single" sticky-offset="50">
+      <x-list list-type="single" sticky="true" sticky-offset="50">
         <list-item item-key="1" id="1" sticky-top><x-view class="item"
           >1</x-view></list-item>
         <list-item item-key="2" id="2"><x-view class="item"
diff --git a/packages/web-platform/web-tests/tests/web-elements/x-list/sticky.html b/packages/web-platform/web-tests/tests/web-elements/x-list/sticky.html
index df452cacc0..35d9e959d8 100644
--- a/packages/web-platform/web-tests/tests/web-elements/x-list/sticky.html
+++ b/packages/web-platform/web-tests/tests/web-elements/x-list/sticky.html
@@ -44,7 +44,7 @@
   <body>
     <script src="/web-elements.js" defer></script>
     <x-view class="page">
-      <x-list list-type="single">
+      <x-list list-type="single" sticky="true">
         <list-item item-key="1" id="1" sticky-top><x-view class="item"
           >1</x-view></list-item>
         <list-item item-key="2" id="2"><x-view class="item"