diff --git a/.changeset/dirty-bananas-tan.md b/.changeset/dirty-bananas-tan.md
new file mode 100644
index 0000000000..6b630c492f
--- /dev/null
+++ b/.changeset/dirty-bananas-tan.md
@@ -0,0 +1,5 @@
+---
+"@lynx-js/web-elements": patch
+---
+
+feat: support `layoutchange` event for x-overlay-ng
diff --git a/.changeset/sour-streets-remain.md b/.changeset/sour-streets-remain.md
new file mode 100644
index 0000000000..f1b106b554
--- /dev/null
+++ b/.changeset/sour-streets-remain.md
@@ -0,0 +1,5 @@
+---
+"@lynx-js/web-explorer": patch
+---
+
+fix: blank screen issue for 0.0.4
diff --git a/packages/web-platform/web-core/src/types/LynxExposureModule.ts b/packages/web-platform/web-core/src/types/LynxExposureModule.ts
deleted file mode 100644
index f8031f5642..0000000000
--- a/packages/web-platform/web-core/src/types/LynxExposureModule.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-// Copyright 2023 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.
-
-export interface LynxExposureModule {
-  resumeExposure: () => void;
-  stopExposure: () => void;
-}
diff --git a/packages/web-platform/web-elements/src/ScrollView/ScrollView.ts b/packages/web-platform/web-elements/src/ScrollView/ScrollView.ts
index 68a4e874fe..6d866b030f 100644
--- a/packages/web-platform/web-elements/src/ScrollView/ScrollView.ts
+++ b/packages/web-platform/web-elements/src/ScrollView/ScrollView.ts
@@ -3,7 +3,7 @@
 // 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 { LynxExposure } from '../common/Exposure.js';
+import { CommonEventsAndMethods } from '../common/CommonEventsAndMethods.js';
 import { FadeEdgeLengthAttribute } from './FadeEdgeLengthAttribute.js';
 import { ScrollAttributes } from './ScrollAttributes.js';
 import { ScrollViewEvents } from './ScrollViewEvents.js';
@@ -14,7 +14,7 @@ import { scrollContainerDom } from '../common/constants.js';
 @Component<typeof ScrollView>(
   'scroll-view',
   [
-    LynxExposure,
+    CommonEventsAndMethods,
     ScrollAttributes,
     FadeEdgeLengthAttribute,
     ScrollViewEvents,
diff --git a/packages/web-platform/web-elements/src/XAudioTT/XAudioTT.ts b/packages/web-platform/web-elements/src/XAudioTT/XAudioTT.ts
index 3b89db0191..d76837d580 100644
--- a/packages/web-platform/web-elements/src/XAudioTT/XAudioTT.ts
+++ b/packages/web-platform/web-elements/src/XAudioTT/XAudioTT.ts
@@ -11,7 +11,7 @@ import {
 } from '@lynx-js/web-elements-reactive';
 import { XAudioAttribute } from './XAudioAttribute.js';
 import { XAudioEvents } from './XAudioEvents.js';
-import { LynxExposure } from '../common/Exposure.js';
+import { CommonEventsAndMethods } from '../common/CommonEventsAndMethods.js';
 import { commonComponentEventSetting } from '../common/commonEventInitConfiguration.js';
 import {
   XAudioErrorCode,
@@ -23,7 +23,7 @@ import {
 
 @Component<typeof XAudioTT>(
   'x-audio-tt',
-  [LynxExposure, XAudioAttribute, XAudioEvents],
+  [CommonEventsAndMethods, XAudioAttribute, XAudioEvents],
   html`<audio id="audio"></audio>`,
 )
 export class XAudioTT extends HTMLElement {
diff --git a/packages/web-platform/web-elements/src/XCanvas/XCanvas.ts b/packages/web-platform/web-elements/src/XCanvas/XCanvas.ts
index c2d7689328..1e38371344 100644
--- a/packages/web-platform/web-elements/src/XCanvas/XCanvas.ts
+++ b/packages/web-platform/web-elements/src/XCanvas/XCanvas.ts
@@ -4,7 +4,7 @@
 // LICENSE file in the root directory of this source tree.
 */
 import { Component, html } from '@lynx-js/web-elements-reactive';
-import { LynxExposure } from '../common/Exposure.js';
+import { CommonEventsAndMethods } from '../common/CommonEventsAndMethods.js';
 import { CanvasAttributes } from './CanvasAttributes.js';
 
 /**
@@ -12,7 +12,7 @@ import { CanvasAttributes } from './CanvasAttributes.js';
  */
 @Component<typeof XCanvas>(
   'x-canvas',
-  [LynxExposure, CanvasAttributes],
+  [CommonEventsAndMethods, CanvasAttributes],
   html`<canvas id="canvas" part="canvas"></canvas>`,
 )
 export class XCanvas extends HTMLElement {}
diff --git a/packages/web-platform/web-elements/src/XFoldViewNg/XFoldviewHeaderNg.ts b/packages/web-platform/web-elements/src/XFoldViewNg/XFoldviewHeaderNg.ts
index 0aa854ae50..f9d3762ff8 100644
--- a/packages/web-platform/web-elements/src/XFoldViewNg/XFoldviewHeaderNg.ts
+++ b/packages/web-platform/web-elements/src/XFoldViewNg/XFoldviewHeaderNg.ts
@@ -4,13 +4,13 @@
 // LICENSE file in the root directory of this source tree.
 */
 import { Component } from '@lynx-js/web-elements-reactive';
-import { LynxExposure } from '../common/Exposure.js';
+import { CommonEventsAndMethods } from '../common/CommonEventsAndMethods.js';
 import { XFoldviewHeaderNgFeatures } from './XFoldviewHeaderNgFeatures.js';
 
 @Component<typeof XFoldviewHeaderNg>(
   'x-foldview-header-ng',
   [
-    LynxExposure,
+    CommonEventsAndMethods,
     XFoldviewHeaderNgFeatures,
   ],
 )
diff --git a/packages/web-platform/web-elements/src/XFoldViewNg/XFoldviewNg.ts b/packages/web-platform/web-elements/src/XFoldViewNg/XFoldviewNg.ts
index 1204021c0d..6e1542109d 100644
--- a/packages/web-platform/web-elements/src/XFoldViewNg/XFoldviewNg.ts
+++ b/packages/web-platform/web-elements/src/XFoldViewNg/XFoldviewNg.ts
@@ -4,7 +4,7 @@
 // LICENSE file in the root directory of this source tree.
 */
 import { Component } from '@lynx-js/web-elements-reactive';
-import { LynxExposure } from '../common/Exposure.js';
+import { CommonEventsAndMethods } from '../common/CommonEventsAndMethods.js';
 import { XFoldviewNgEvents } from './XFoldviewNgEvents.js';
 import { scrollContainerDom } from '../common/constants.js';
 
@@ -12,7 +12,7 @@ export const scrollableLength = Symbol('scrollableLength');
 export const isHeaderShowing = Symbol('isHeaderShowing');
 
 @Component<typeof XFoldviewNg>('x-foldview-ng', [
-  LynxExposure,
+  CommonEventsAndMethods,
   XFoldviewNgEvents,
 ])
 export class XFoldviewNg extends HTMLElement {
diff --git a/packages/web-platform/web-elements/src/XFoldViewNg/XFoldviewSlotDragNg.ts b/packages/web-platform/web-elements/src/XFoldViewNg/XFoldviewSlotDragNg.ts
index 241b440386..73a933cc6f 100644
--- a/packages/web-platform/web-elements/src/XFoldViewNg/XFoldviewSlotDragNg.ts
+++ b/packages/web-platform/web-elements/src/XFoldViewNg/XFoldviewSlotDragNg.ts
@@ -4,9 +4,9 @@
 // LICENSE file in the root directory of this source tree.
 */
 import { Component } from '@lynx-js/web-elements-reactive';
-import { LynxExposure } from '../common/Exposure.js';
+import { CommonEventsAndMethods } from '../common/CommonEventsAndMethods.js';
 
 @Component<typeof XFoldviewSlotDragNg>('x-foldivew-slot-drag-ng', [
-  LynxExposure,
+  CommonEventsAndMethods,
 ])
 export class XFoldviewSlotDragNg extends HTMLElement {}
diff --git a/packages/web-platform/web-elements/src/XFoldViewNg/XFoldviewSlotNg.ts b/packages/web-platform/web-elements/src/XFoldViewNg/XFoldviewSlotNg.ts
index a8689d34da..33f334d120 100644
--- a/packages/web-platform/web-elements/src/XFoldViewNg/XFoldviewSlotNg.ts
+++ b/packages/web-platform/web-elements/src/XFoldViewNg/XFoldviewSlotNg.ts
@@ -4,13 +4,13 @@
 // LICENSE file in the root directory of this source tree.
 */
 import { Component } from '@lynx-js/web-elements-reactive';
-import { LynxExposure } from '../common/Exposure.js';
+import { CommonEventsAndMethods } from '../common/CommonEventsAndMethods.js';
 import { XFoldviewSlotNgTouchEventsHandler } from './XFoldviewSlotNgTouchEventsHandler.js';
 
 @Component<typeof XFoldviewSlotNg>(
   'x-foldview-slot-ng',
   [
-    LynxExposure,
+    CommonEventsAndMethods,
     XFoldviewSlotNgTouchEventsHandler,
   ],
 )
diff --git a/packages/web-platform/web-elements/src/XFoldViewNg/XFoldviewToolbarNg.ts b/packages/web-platform/web-elements/src/XFoldViewNg/XFoldviewToolbarNg.ts
index c75f087c14..d57200fdc6 100644
--- a/packages/web-platform/web-elements/src/XFoldViewNg/XFoldviewToolbarNg.ts
+++ b/packages/web-platform/web-elements/src/XFoldViewNg/XFoldviewToolbarNg.ts
@@ -4,9 +4,9 @@
 // LICENSE file in the root directory of this source tree.
 */
 import { Component } from '@lynx-js/web-elements-reactive';
-import { LynxExposure } from '../common/Exposure.js';
+import { CommonEventsAndMethods } from '../common/CommonEventsAndMethods.js';
 
 @Component<typeof XFoldviewToolbarNg>('x-foldview-toolbar-ng', [
-  LynxExposure,
+  CommonEventsAndMethods,
 ])
 export class XFoldviewToolbarNg extends HTMLElement {}
diff --git a/packages/web-platform/web-elements/src/XImage/FilterImage.ts b/packages/web-platform/web-elements/src/XImage/FilterImage.ts
index 1ba561b41b..c9c0eb5c59 100644
--- a/packages/web-platform/web-elements/src/XImage/FilterImage.ts
+++ b/packages/web-platform/web-elements/src/XImage/FilterImage.ts
@@ -4,14 +4,14 @@
 // LICENSE file in the root directory of this source tree.
 */
 import { Component, html } from '@lynx-js/web-elements-reactive';
-import { LynxExposure } from '../common/Exposure.js';
+import { CommonEventsAndMethods } from '../common/CommonEventsAndMethods.js';
 import { DropShadow } from './DropShadow.js';
 import { ImageSrc } from './ImageSrc.js';
 import { ImageEvents } from './ImageEvents.js';
 
 @Component<typeof FilterImage>(
   'filter-image',
-  [LynxExposure, ImageSrc, DropShadow, ImageEvents],
+  [CommonEventsAndMethods, ImageSrc, DropShadow, ImageEvents],
   html` <img part="img" alt="" id="img" /> `,
 )
 export class FilterImage extends HTMLElement {}
diff --git a/packages/web-platform/web-elements/src/XImage/XImage.ts b/packages/web-platform/web-elements/src/XImage/XImage.ts
index fe2f8052ec..e986087e60 100644
--- a/packages/web-platform/web-elements/src/XImage/XImage.ts
+++ b/packages/web-platform/web-elements/src/XImage/XImage.ts
@@ -4,13 +4,13 @@
 // LICENSE file in the root directory of this source tree.
 */
 import { Component, html } from '@lynx-js/web-elements-reactive';
-import { LynxExposure } from '../common/Exposure.js';
+import { CommonEventsAndMethods } from '../common/CommonEventsAndMethods.js';
 import { ImageSrc } from './ImageSrc.js';
 import { ImageEvents } from './ImageEvents.js';
 
 @Component<typeof XImage>(
   'x-image',
-  [LynxExposure, ImageSrc, ImageEvents],
+  [CommonEventsAndMethods, ImageSrc, ImageEvents],
   html` <img part="img" alt="" id="img" /> `,
 )
 export class XImage extends HTMLElement {}
diff --git a/packages/web-platform/web-elements/src/XInput/XInput.ts b/packages/web-platform/web-elements/src/XInput/XInput.ts
index ef6bd5bf78..9ba8788287 100644
--- a/packages/web-platform/web-elements/src/XInput/XInput.ts
+++ b/packages/web-platform/web-elements/src/XInput/XInput.ts
@@ -9,12 +9,12 @@ import { InputBaseAttributes } from './InputBaseAttributes.js';
 import { Placeholder } from './Placeholder.js';
 import { XInputAttribute } from './XInputAttribute.js';
 import { XInputEvents } from './XInputEvents.js';
-import { LynxExposure } from '../common/Exposure.js';
+import { CommonEventsAndMethods } from '../common/CommonEventsAndMethods.js';
 
 @Component<typeof XInput>(
   'x-input',
   [
-    LynxExposure,
+    CommonEventsAndMethods,
     Placeholder,
     XInputAttribute,
     InputBaseAttributes,
diff --git a/packages/web-platform/web-elements/src/XList/ListItem.ts b/packages/web-platform/web-elements/src/XList/ListItem.ts
index 79040f7102..2fcc21f8e0 100644
--- a/packages/web-platform/web-elements/src/XList/ListItem.ts
+++ b/packages/web-platform/web-elements/src/XList/ListItem.ts
@@ -4,7 +4,7 @@
 // LICENSE file in the root directory of this source tree.
 */
 import { Component } from '@lynx-js/web-elements-reactive';
-import { LynxExposure } from '../common/Exposure.js';
+import { CommonEventsAndMethods } from '../common/CommonEventsAndMethods.js';
 
-@Component<typeof ListItem>('list-item', [LynxExposure])
+@Component<typeof ListItem>('list-item', [CommonEventsAndMethods])
 export class ListItem extends HTMLElement {}
diff --git a/packages/web-platform/web-elements/src/XList/XList.ts b/packages/web-platform/web-elements/src/XList/XList.ts
index 4c7ca06928..18ec9ce803 100644
--- a/packages/web-platform/web-elements/src/XList/XList.ts
+++ b/packages/web-platform/web-elements/src/XList/XList.ts
@@ -7,12 +7,12 @@ import { Component, genDomGetter, html } from '@lynx-js/web-elements-reactive';
 import { XListAttributes } from './XListAttributes.js';
 import { XListEvents } from './XListEvents.js';
 import { XListWaterfall } from './XListWaterfall.js';
-import { LynxExposure } from '../common/Exposure.js';
+import { CommonEventsAndMethods } from '../common/CommonEventsAndMethods.js';
 import { commonComponentEventSetting } from '../common/commonEventInitConfiguration.js';
 
 @Component<typeof XList>(
   'x-list',
-  [LynxExposure, XListAttributes, XListEvents, XListWaterfall],
+  [CommonEventsAndMethods, XListAttributes, XListEvents, XListWaterfall],
   html`<style>
   .placeholder-dom {
     display: none;
diff --git a/packages/web-platform/web-elements/src/XOverlayNg/XOverlayNg.ts b/packages/web-platform/web-elements/src/XOverlayNg/XOverlayNg.ts
index 41dd7b94ae..9b540431bf 100644
--- a/packages/web-platform/web-elements/src/XOverlayNg/XOverlayNg.ts
+++ b/packages/web-platform/web-elements/src/XOverlayNg/XOverlayNg.ts
@@ -3,14 +3,17 @@
 // 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 { LynxExposure } from '../common/Exposure.js';
+import {
+  layoutChangeTarget,
+  CommonEventsAndMethods,
+} from '../common/CommonEventsAndMethods.js';
 import { XOverlayAttributes } from './XOverlayAttributes.js';
 
 import { Component, html } from '@lynx-js/web-elements-reactive';
 
 @Component<typeof XOverlayNg>(
   'x-overlay-ng',
-  [LynxExposure, XOverlayAttributes],
+  [CommonEventsAndMethods, XOverlayAttributes],
   html`
     <style>
       #dialog[open] {
@@ -29,4 +32,8 @@ import { Component, html } from '@lynx-js/web-elements-reactive';
     </dialog>
   `,
 )
-export class XOverlayNg extends HTMLElement {}
+export class XOverlayNg extends HTMLElement {
+  get [layoutChangeTarget](): HTMLElement {
+    return this.shadowRoot!.firstElementChild as HTMLElement;
+  }
+}
diff --git a/packages/web-platform/web-elements/src/XRefreshView/XRefreshFooter.ts b/packages/web-platform/web-elements/src/XRefreshView/XRefreshFooter.ts
index b30000f8d7..7122a0b503 100644
--- a/packages/web-platform/web-elements/src/XRefreshView/XRefreshFooter.ts
+++ b/packages/web-platform/web-elements/src/XRefreshView/XRefreshFooter.ts
@@ -5,12 +5,12 @@
 */
 import { Component } from '@lynx-js/web-elements-reactive';
 import { XRefreshSubElementIntersectionObserver } from './XRefreshSubElementIntersectionObserver.js';
-import { LynxExposure } from '../common/Exposure.js';
+import { CommonEventsAndMethods } from '../common/CommonEventsAndMethods.js';
 
 @Component(
   'x-refresh-footer',
   [
-    LynxExposure,
+    CommonEventsAndMethods,
     XRefreshSubElementIntersectionObserver,
   ],
 )
diff --git a/packages/web-platform/web-elements/src/XRefreshView/XRefreshHeader.ts b/packages/web-platform/web-elements/src/XRefreshView/XRefreshHeader.ts
index 74d07d3076..7032d7c442 100644
--- a/packages/web-platform/web-elements/src/XRefreshView/XRefreshHeader.ts
+++ b/packages/web-platform/web-elements/src/XRefreshView/XRefreshHeader.ts
@@ -5,12 +5,12 @@
 */
 import { Component } from '@lynx-js/web-elements-reactive';
 import { XRefreshSubElementIntersectionObserver } from './XRefreshSubElementIntersectionObserver.js';
-import { LynxExposure } from '../common/Exposure.js';
+import { CommonEventsAndMethods } from '../common/CommonEventsAndMethods.js';
 
 @Component(
   'x-refresh-header',
   [
-    LynxExposure,
+    CommonEventsAndMethods,
     XRefreshSubElementIntersectionObserver,
   ],
 )
diff --git a/packages/web-platform/web-elements/src/XRefreshView/XRefreshView.ts b/packages/web-platform/web-elements/src/XRefreshView/XRefreshView.ts
index 6ce9f272ba..fab835d89e 100644
--- a/packages/web-platform/web-elements/src/XRefreshView/XRefreshView.ts
+++ b/packages/web-platform/web-elements/src/XRefreshView/XRefreshView.ts
@@ -5,12 +5,12 @@
 */
 import { Component, genDomGetter, html } from '@lynx-js/web-elements-reactive';
 import { XRefreshViewEventsEmitter } from './XRefreshViewEventsEmitter.js';
-import { LynxExposure } from '../common/Exposure.js';
+import { CommonEventsAndMethods } from '../common/CommonEventsAndMethods.js';
 import { scrollContainerDom } from '../common/constants.js';
 
 @Component(
   'x-refresh-view',
-  [LynxExposure, XRefreshViewEventsEmitter],
+  [CommonEventsAndMethods, XRefreshViewEventsEmitter],
   html`
     <style>
       .bounce-container {
diff --git a/packages/web-platform/web-elements/src/XSvg/XSvg.ts b/packages/web-platform/web-elements/src/XSvg/XSvg.ts
index e8b71bf87a..fd29ef76f7 100644
--- a/packages/web-platform/web-elements/src/XSvg/XSvg.ts
+++ b/packages/web-platform/web-elements/src/XSvg/XSvg.ts
@@ -9,7 +9,7 @@ import {
   bindToStyle,
   registerAttributeHandler,
 } from '@lynx-js/web-elements-reactive';
-import { LynxExposure } from '../common/Exposure.js';
+import { CommonEventsAndMethods } from '../common/CommonEventsAndMethods.js';
 import { commonComponentEventSetting } from '../common/commonEventInitConfiguration.js';
 
 export class XSvgFeatures
@@ -62,5 +62,5 @@ export class XSvgFeatures
   }
 }
 
-@Component<typeof XSvg>('x-svg', [LynxExposure, XSvgFeatures])
+@Component<typeof XSvg>('x-svg', [CommonEventsAndMethods, XSvgFeatures])
 export class XSvg extends HTMLElement {}
diff --git a/packages/web-platform/web-elements/src/XSwiper/SwiperItem.ts b/packages/web-platform/web-elements/src/XSwiper/SwiperItem.ts
index e624721d5d..c56b2282ac 100644
--- a/packages/web-platform/web-elements/src/XSwiper/SwiperItem.ts
+++ b/packages/web-platform/web-elements/src/XSwiper/SwiperItem.ts
@@ -4,7 +4,7 @@
 // LICENSE file in the root directory of this source tree.
 */
 import { Component } from '@lynx-js/web-elements-reactive';
-import { LynxExposure } from '../common/Exposure.js';
+import { CommonEventsAndMethods } from '../common/CommonEventsAndMethods.js';
 
-@Component<typeof SwiperItem>('x-swiper-item', [LynxExposure])
+@Component<typeof SwiperItem>('x-swiper-item', [CommonEventsAndMethods])
 export class SwiperItem extends HTMLElement {}
diff --git a/packages/web-platform/web-elements/src/XSwiper/XSwiper.ts b/packages/web-platform/web-elements/src/XSwiper/XSwiper.ts
index 6d01cc9ffb..d964266744 100644
--- a/packages/web-platform/web-elements/src/XSwiper/XSwiper.ts
+++ b/packages/web-platform/web-elements/src/XSwiper/XSwiper.ts
@@ -9,13 +9,13 @@ import { XSwipeEvents } from './XSwiperEvents.js';
 import { XSwiperAutoScroll } from './XSwiperAutoScroll.js';
 import { XSwiperCircular } from './XSwiperCircular.js';
 import { XSwiperIndicator } from './XSwiperIndicator.js';
-import { LynxExposure } from '../common/Exposure.js';
+import { CommonEventsAndMethods } from '../common/CommonEventsAndMethods.js';
 import { scrollContainerDom } from '../common/constants.js';
 
 @Component<typeof XSwiper>(
   'x-swiper',
   [
-    LynxExposure,
+    CommonEventsAndMethods,
     XSwiperIndicator,
     XSwipeEvents,
     XSwiperCircular,
diff --git a/packages/web-platform/web-elements/src/XText/XText.ts b/packages/web-platform/web-elements/src/XText/XText.ts
index d42a75b3d6..659df744e9 100644
--- a/packages/web-platform/web-elements/src/XText/XText.ts
+++ b/packages/web-platform/web-elements/src/XText/XText.ts
@@ -4,14 +4,16 @@
 // LICENSE file in the root directory of this source tree.
 */
 import { Component, html } from '@lynx-js/web-elements-reactive';
-import { LynxExposure } from '../common/Exposure.js';
 import { XTextTruncation } from './XTextTruncation.js';
 import { ScrollIntoView } from '../ScrollView/ScrollIntoView.js';
-import { CommonEventsAndMethods } from '../common/CommonEventsAndMethods.js';
+import {
+  CommonEventsAndMethods,
+  layoutChangeTarget,
+} from '../common/CommonEventsAndMethods.js';
 
 @Component<typeof XText>(
   'x-text',
-  [LynxExposure, CommonEventsAndMethods, XTextTruncation],
+  [CommonEventsAndMethods, CommonEventsAndMethods, XTextTruncation],
   html`<div id="inner-box" part="inner-box"><slot></slot><slot name="inline-truncation"></slot></div>`,
 )
 export class XText extends HTMLElement {
@@ -36,4 +38,6 @@ export class XText extends HTMLElement {
       super.scrollIntoView(arg);
     }
   }
+
+  [layoutChangeTarget] = this;
 }
diff --git a/packages/web-platform/web-elements/src/XTextarea/XTextarea.ts b/packages/web-platform/web-elements/src/XTextarea/XTextarea.ts
index ad6eb662ae..d536185e29 100644
--- a/packages/web-platform/web-elements/src/XTextarea/XTextarea.ts
+++ b/packages/web-platform/web-elements/src/XTextarea/XTextarea.ts
@@ -8,13 +8,13 @@ import { Placeholder } from './Placeholder.js';
 import { TextareaBaseAttributes } from './TextareaBaseAttributes.js';
 import { XTextareaAttributes } from './XTextareaAttributes.js';
 import { XTextareaEvents } from './XTextareaEvents.js';
-import { LynxExposure } from '../common/Exposure.js';
+import { CommonEventsAndMethods } from '../common/CommonEventsAndMethods.js';
 
 // x-textarea
 @Component(
   'x-textarea',
   [
-    LynxExposure,
+    CommonEventsAndMethods,
     Placeholder,
     TextareaBaseAttributes,
     XTextareaAttributes,
diff --git a/packages/web-platform/web-elements/src/XView/XBlurView.ts b/packages/web-platform/web-elements/src/XView/XBlurView.ts
index 6888576626..56ebf71ccd 100644
--- a/packages/web-platform/web-elements/src/XView/XBlurView.ts
+++ b/packages/web-platform/web-elements/src/XView/XBlurView.ts
@@ -4,12 +4,12 @@
 // LICENSE file in the root directory of this source tree.
 */
 import { Component } from '@lynx-js/web-elements-reactive';
-import { LynxExposure } from '../common/Exposure.js';
+import { CommonEventsAndMethods } from '../common/CommonEventsAndMethods.js';
 import { BlurRadius } from './BlurRadius.js';
 
 @Component<typeof XBlurView>(
   'x-blur-view',
-  [LynxExposure, BlurRadius],
+  [CommonEventsAndMethods, BlurRadius],
   `<style id="dynamic-style"></style><slot></slot>`,
 )
 export class XBlurView extends HTMLElement {}
diff --git a/packages/web-platform/web-elements/src/XView/XView.ts b/packages/web-platform/web-elements/src/XView/XView.ts
index 3c2e5c4170..0174d522cc 100644
--- a/packages/web-platform/web-elements/src/XView/XView.ts
+++ b/packages/web-platform/web-elements/src/XView/XView.ts
@@ -5,10 +5,15 @@
 */
 import { Component } from '@lynx-js/web-elements-reactive';
 import { ScrollIntoView } from '../ScrollView/ScrollIntoView.js';
-import { LynxExposure } from '../common/Exposure.js';
-import { CommonEventsAndMethods } from '../common/CommonEventsAndMethods.js';
+import {
+  CommonEventsAndMethods,
+  layoutChangeTarget,
+} from '../common/CommonEventsAndMethods.js';
 
-@Component<typeof XView>('x-view', [LynxExposure, CommonEventsAndMethods])
+@Component<typeof XView>('x-view', [
+  CommonEventsAndMethods,
+  CommonEventsAndMethods,
+])
 export class XView extends HTMLElement {
   superScrollIntoView(arg?: boolean | ScrollIntoViewOptions | undefined): void {
     super.scrollIntoView(arg);
@@ -29,4 +34,5 @@ export class XView extends HTMLElement {
       super.scrollIntoView(arg);
     }
   }
+  [layoutChangeTarget] = this;
 }
diff --git a/packages/web-platform/web-elements/src/XViewpagerNg/XViewpagerItemNg.ts b/packages/web-platform/web-elements/src/XViewpagerNg/XViewpagerItemNg.ts
index 49a42296cc..078242dac0 100644
--- a/packages/web-platform/web-elements/src/XViewpagerNg/XViewpagerItemNg.ts
+++ b/packages/web-platform/web-elements/src/XViewpagerNg/XViewpagerItemNg.ts
@@ -4,9 +4,9 @@
 // LICENSE file in the root directory of this source tree.
 */
 import { Component } from '@lynx-js/web-elements-reactive';
-import { LynxExposure } from '../common/Exposure.js';
+import { CommonEventsAndMethods } from '../common/CommonEventsAndMethods.js';
 
 @Component<typeof XViewpagerItemNg>('x-viewpager-item-ng', [
-  LynxExposure,
+  CommonEventsAndMethods,
 ])
 export class XViewpagerItemNg extends HTMLElement {}
diff --git a/packages/web-platform/web-elements/src/XViewpagerNg/XViewpagerNg.ts b/packages/web-platform/web-elements/src/XViewpagerNg/XViewpagerNg.ts
index bacad425cd..0a5ea207be 100644
--- a/packages/web-platform/web-elements/src/XViewpagerNg/XViewpagerNg.ts
+++ b/packages/web-platform/web-elements/src/XViewpagerNg/XViewpagerNg.ts
@@ -8,13 +8,13 @@ import {
   Component,
   html,
 } from '@lynx-js/web-elements-reactive';
-import { LynxExposure } from '../common/Exposure.js';
+import { CommonEventsAndMethods } from '../common/CommonEventsAndMethods.js';
 import { XViewpagerNgEvents } from './XViewpagerNgEvents.js';
 import { scrollContainerDom } from '../common/constants.js';
 
 @Component<typeof XViewpagerNg>(
   'x-viewpager-ng',
-  [LynxExposure, XViewpagerNgEvents],
+  [CommonEventsAndMethods, XViewpagerNgEvents],
   html`
     <style>
       #bounce-padding {
diff --git a/packages/web-platform/web-elements/src/common/CommonEventsAndMethods.ts b/packages/web-platform/web-elements/src/common/CommonEventsAndMethods.ts
index 39c5a5803f..70aa25eb37 100644
--- a/packages/web-platform/web-elements/src/common/CommonEventsAndMethods.ts
+++ b/packages/web-platform/web-elements/src/common/CommonEventsAndMethods.ts
@@ -2,24 +2,299 @@
 // 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 { convertLengthToPx } from './convertLengthToPx.js';
 import { commonComponentEventSetting } from './commonEventInitConfiguration.js';
+import { scrollContainerDom } from './constants.js';
 import { registerEventEnableStatusChangeHandler } from '@lynx-js/web-elements-reactive';
 
+export const layoutChangeTarget = Symbol('layoutChangeTarget');
+
+export interface ExposureParameters {
+  exposureID: string | null;
+  exposureArea: string | null;
+  exposureScene: string | null;
+  exposureScreenMarginTop: string | null;
+  exposureScreenMarginRight: string | null;
+  exposureScreenMarginBottom: string | null;
+  exposureScreenMarginLeft: string | null;
+  exposureUIMarginTop: string | null;
+  exposureUIMarginRight: string | null;
+  exposureUIMarginBottom: string | null;
+  exposureUIMarginLeft: string | null;
+}
+
+export interface ExposureEvent {
+  'exposure-id': string;
+  'exposure-scene': string;
+  exposureID: string;
+  exposureScene: string;
+}
+
 export class CommonEventsAndMethods {
-  static readonly observedAttributes = [];
+  static readonly observedAttributes = [
+    'exposure-id',
+    'exposure-area',
+    'exposure-screen-margin-top',
+    'exposure-screen-margin-right',
+    'exposure-screen-margin-bottom',
+    'exposure-screen-margin-left',
+    'exposure-ui-margin-top',
+    'exposure-ui-margin-right',
+    'exposure-ui-margin-bottom',
+    'exposure-ui-margin-left',
+  ];
 
-  readonly #dom: HTMLElement;
+  #uiAppearEnabled = false;
+  #uiDisappearEnabled = false;
 
-  #observing = false;
-  #resizeObserver?: ResizeObserver;
+  readonly #dom: HTMLElement & { [layoutChangeTarget]?: HTMLElement };
+
+  /**
+   * Stores a promise. We will handler the exposure attribute change after all related life-cycle events has been fired by browser.
+   */
+  #afterAttributeChanged?: Promise<void>;
+
+  /**
+   * If this dom is already exposured
+   */
+  #exposureTriggerd = false;
 
-  constructor(currentElement: HTMLElement) {
+  /**
+   * keeps the observer of current dom
+   */
+  #exposureObserver?: IntersectionObserver;
+
+  get #exposureEnabled() {
+    return (
+      this.#uiAppearEnabled
+      || this.#uiDisappearEnabled
+      || this.#dom.getAttribute('exposure-id') !== null
+    );
+  }
+
+  constructor(
+    currentElement: HTMLElement & { [layoutChangeTarget]?: HTMLElement },
+  ) {
     this.#dom = currentElement;
   }
 
+  onExposureParamsChanged = () => {
+    if (!this.#afterAttributeChanged) {
+      this.#afterAttributeChanged = Promise.resolve().then(() => {
+        this.#updateExposure();
+        this.#afterAttributeChanged = undefined;
+      });
+    }
+  };
+
+  onExposureIdChanged(_: string | null, oldValue: string | null) {
+    if (oldValue) {
+      if (this.#exposureEnabled) {
+        this.#sendOneExposureEvent({ isIntersecting: false }, oldValue);
+      }
+    }
+    this.onExposureParamsChanged();
+  }
+  attributeChangedHandler = new Proxy(this, {
+    get(target, attribute: string) {
+      if (CommonEventsAndMethods.observedAttributes.includes(attribute)) {
+        if (attribute === 'exposure-id') {
+          return { handler: target.onExposureIdChanged, noDomMeasure: true };
+        } else {
+          return {
+            handler: target.onExposureParamsChanged,
+            noDomMeasure: true,
+          };
+        }
+      }
+      return;
+    },
+  });
+
+  eventStatusChangedHandler = {
+    'uiappear': (status: boolean) => {
+      this.#uiAppearEnabled = status;
+      this.onExposureParamsChanged();
+    },
+    'uidisappear': (status: boolean) => {
+      this.#uiDisappearEnabled = status;
+      this.onExposureParamsChanged();
+    },
+  };
+
+  #updateExposure() {
+    const newParams: ExposureParameters = {
+      exposureID: this.#dom.getAttribute('exposure-id'),
+      exposureArea: this.#dom.getAttribute('exposure-area'),
+      exposureScene: this.#dom.getAttribute('exposure-scene'),
+      exposureScreenMarginTop: this.#dom.getAttribute(
+        'exposure-screen-margin-top',
+      ),
+      exposureScreenMarginRight: this.#dom.getAttribute(
+        'exposure-screen-margin-right',
+      ),
+      exposureScreenMarginBottom: this.#dom.getAttribute(
+        'exposure-screen-margin-bottom',
+      ),
+      exposureScreenMarginLeft: this.#dom.getAttribute(
+        'exposure-screen-margin-left',
+      ),
+      exposureUIMarginTop: this.#dom.getAttribute(
+        'exposure-ui-margin-top',
+      ),
+      exposureUIMarginRight: this.#dom.getAttribute(
+        'exposure-ui-margin-right',
+      ),
+      exposureUIMarginBottom: this.#dom.getAttribute(
+        'exposure-ui-margin-bottom',
+      ),
+      exposureUIMarginLeft: this.#dom.getAttribute(
+        'exposure-ui-margin-left',
+      ),
+    };
+    if (this.#exposureEnabled) {
+      if (IntersectionObserver) {
+        const uiMargin = {
+          top: convertLengthToPx(
+            this.#dom,
+            newParams.exposureUIMarginTop,
+          ),
+          right: convertLengthToPx(
+            this.#dom,
+            newParams.exposureUIMarginRight,
+            true,
+          ),
+          bottom: convertLengthToPx(
+            this.#dom,
+            newParams.exposureUIMarginBottom,
+          ),
+          left: convertLengthToPx(
+            this.#dom,
+            newParams.exposureUIMarginLeft,
+            true,
+          ),
+        };
+        const screenMargin = {
+          top: convertLengthToPx(
+            this.#dom,
+            newParams.exposureScreenMarginTop,
+          ),
+          right: convertLengthToPx(
+            this.#dom,
+            newParams.exposureScreenMarginRight,
+            true,
+          ),
+          bottom: convertLengthToPx(
+            this.#dom,
+            newParams.exposureScreenMarginBottom,
+          ),
+          left: convertLengthToPx(
+            this.#dom,
+            newParams.exposureScreenMarginLeft,
+            true,
+          ),
+        };
+        /**
+         * TODO: @haoyang.wang support the switch `enableExposureUIMargin`
+         */
+        const calcedRootMargin = {
+          top: (uiMargin.bottom ? -1 : 1)
+            * (screenMargin.top - uiMargin.bottom),
+          right: (uiMargin.left ? -1 : 1)
+            * (screenMargin.right - uiMargin.left),
+          bottom: (uiMargin.top ? -1 : 1)
+            * (screenMargin.bottom - uiMargin.top),
+          left: (uiMargin.right ? -1 : 1)
+            * (screenMargin.left - uiMargin.right),
+        };
+        const exposureArea = this.#dom.getAttribute('exposure-area');
+        const rootMargin =
+          `${calcedRootMargin.top}px ${calcedRootMargin.right}px ${calcedRootMargin.bottom}px ${calcedRootMargin.left}px`;
+        const threshold = exposureArea ? parseFloat(exposureArea) / 100 : 0;
+        if (this.#exposureObserver) {
+          this.#exposureObserver.disconnect();
+        }
+
+        /**
+         * Get the closest scrollable ancestor
+         */
+        let root: HTMLElement | null = this.#dom.parentElement;
+        while (root) {
+          // @ts-expect-error
+          if (root[scrollContainerDom]) {
+            // @ts-expect-error
+            root = root[scrollContainerDom];
+            break;
+          } else {
+            root = root.parentElement;
+          }
+        }
+        this.#exposureTriggerd = false;
+        this.#exposureObserver = new IntersectionObserver(
+          ([entry]) => {
+            if (entry) {
+              if (entry.isIntersecting) {
+                this.#exposureTriggerd = true;
+              }
+              this.#sendOneExposureEvent(entry);
+            }
+          },
+          {
+            rootMargin,
+            threshold,
+            root,
+          },
+        );
+        this.#exposureObserver.observe(this.#dom);
+      }
+    } else {
+      this.#disableExposure();
+    }
+  }
+
+  #sendOneExposureEvent(
+    entry: IntersectionObserverEntry | { isIntersecting: boolean },
+    overrideExposureId?: string,
+  ) {
+    if (!this.#exposureTriggerd) {
+      return;
+    }
+    const exposureID = overrideExposureId
+      ?? this.#dom.getAttribute('exposure-id') ?? '';
+    const exposureScene = this.#dom.getAttribute('exposure-scene')
+      ?? '';
+    const detail = {
+      'exposure-id': exposureID,
+      'exposure-scene': exposureScene,
+      exposureID,
+      exposureScene,
+    };
+    const appearEvent = new CustomEvent(
+      entry.isIntersecting ? 'uiappear' : 'uidisappear',
+      {
+        ...commonComponentEventSetting,
+        detail,
+      },
+    );
+    const exposureEvent = new CustomEvent(
+      entry.isIntersecting ? 'exposure' : 'disexposure',
+      {
+        bubbles: true,
+        composed: false,
+        cancelable: false,
+        detail,
+      },
+    );
+    Object.assign(appearEvent, detail);
+    this.#dom.dispatchEvent(appearEvent);
+    this.#dom.dispatchEvent(exposureEvent);
+  }
+
+  #resizeObserving = false;
+  #resizeObserver?: ResizeObserver;
   @registerEventEnableStatusChangeHandler('layoutchange')
   __handleScrollUpperThresholdEventEnabled = (enabled: boolean) => {
-    if (enabled) {
+    if (enabled && this.#dom[layoutChangeTarget]) {
       if (!this.#resizeObserver) {
         this.#resizeObserver = new ResizeObserver(([entry]) => {
           if (entry) {
@@ -43,13 +318,20 @@ export class CommonEventsAndMethods {
             );
           }
         });
-        if (!this.#observing) {
-          this.#resizeObserver.observe(this.#dom);
-          this.#observing = true;
+        if (!this.#resizeObserving) {
+          this.#resizeObserver.observe(this.#dom[layoutChangeTarget]);
+          this.#resizeObserving = true;
         }
       }
     } else {
       this.#resizeObserver?.disconnect();
     }
   };
+
+  #disableExposure() {
+    if (this.#exposureObserver) {
+      this.#exposureObserver.disconnect();
+      this.#exposureObserver = undefined;
+    }
+  }
 }
diff --git a/packages/web-platform/web-elements/src/common/Exposure.ts b/packages/web-platform/web-elements/src/common/Exposure.ts
deleted file mode 100644
index b5dcaf4541..0000000000
--- a/packages/web-platform/web-elements/src/common/Exposure.ts
+++ /dev/null
@@ -1,294 +0,0 @@
-// 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 { convertLengthToPx } from './convertLengthToPx.js';
-import { commonComponentEventSetting } from './commonEventInitConfiguration.js';
-import { scrollContainerDom } from './constants.js';
-
-export interface ExposureParameters {
-  exposureID: string | null;
-  exposureArea: string | null;
-  exposureScene: string | null;
-  exposureScreenMarginTop: string | null;
-  exposureScreenMarginRight: string | null;
-  exposureScreenMarginBottom: string | null;
-  exposureScreenMarginLeft: string | null;
-  exposureUIMarginTop: string | null;
-  exposureUIMarginRight: string | null;
-  exposureUIMarginBottom: string | null;
-  exposureUIMarginLeft: string | null;
-}
-
-export interface ExposureEvent {
-  'exposure-id': string;
-  'exposure-scene': string;
-  exposureID: string;
-  exposureScene: string;
-}
-
-export class LynxExposure {
-  static readonly observedAttributes = [
-    'exposure-id',
-    'exposure-area',
-    'exposure-screen-margin-top',
-    'exposure-screen-margin-right',
-    'exposure-screen-margin-bottom',
-    'exposure-screen-margin-left',
-    'exposure-ui-margin-top',
-    'exposure-ui-margin-right',
-    'exposure-ui-margin-bottom',
-    'exposure-ui-margin-left',
-  ];
-
-  #uiAppearEnabled = false;
-  #uiDisappearEnabled = false;
-
-  readonly #currentElement: HTMLElement;
-
-  /**
-   * Stores a promise. We will handler the exposure attribute change after all related life-cycle events has been fired by browser.
-   */
-  #afterAttributeChanged?: Promise<void>;
-
-  /**
-   * If this dom is already exposured
-   */
-  #exposureTriggerd = false;
-
-  /**
-   * keeps the observer of current dom
-   */
-  #exposureObserver?: IntersectionObserver;
-
-  get #exposureEnabled() {
-    return (
-      this.#uiAppearEnabled
-      || this.#uiDisappearEnabled
-      || this.#currentElement.getAttribute('exposure-id') !== null
-    );
-  }
-
-  constructor(currentElement: HTMLElement) {
-    this.#currentElement = currentElement;
-  }
-
-  onExposureParamsChanged = () => {
-    if (!this.#afterAttributeChanged) {
-      this.#afterAttributeChanged = Promise.resolve().then(() => {
-        this.#updateExposure();
-        this.#afterAttributeChanged = undefined;
-      });
-    }
-  };
-
-  onExposureIdChanged(_: string | null, oldValue: string | null) {
-    if (oldValue) {
-      if (this.#exposureEnabled) {
-        this.#sendOneExposureEvent({ isIntersecting: false }, oldValue);
-      }
-    }
-    this.onExposureParamsChanged();
-  }
-  attributeChangedHandler = new Proxy(this, {
-    get(target, attribute: string) {
-      if (LynxExposure.observedAttributes.includes(attribute)) {
-        if (attribute === 'exposure-id') {
-          return { handler: target.onExposureIdChanged, noDomMeasure: true };
-        } else {
-          return {
-            handler: target.onExposureParamsChanged,
-            noDomMeasure: true,
-          };
-        }
-      }
-      return;
-    },
-  });
-
-  eventStatusChangedHandler = {
-    'uiappear': (status: boolean) => {
-      this.#uiAppearEnabled = status;
-      this.onExposureParamsChanged();
-    },
-    'uidisappear': (status: boolean) => {
-      this.#uiDisappearEnabled = status;
-      this.onExposureParamsChanged();
-    },
-  };
-
-  #updateExposure() {
-    const newParams: ExposureParameters = {
-      exposureID: this.#currentElement.getAttribute('exposure-id'),
-      exposureArea: this.#currentElement.getAttribute('exposure-area'),
-      exposureScene: this.#currentElement.getAttribute('exposure-scene'),
-      exposureScreenMarginTop: this.#currentElement.getAttribute(
-        'exposure-screen-margin-top',
-      ),
-      exposureScreenMarginRight: this.#currentElement.getAttribute(
-        'exposure-screen-margin-right',
-      ),
-      exposureScreenMarginBottom: this.#currentElement.getAttribute(
-        'exposure-screen-margin-bottom',
-      ),
-      exposureScreenMarginLeft: this.#currentElement.getAttribute(
-        'exposure-screen-margin-left',
-      ),
-      exposureUIMarginTop: this.#currentElement.getAttribute(
-        'exposure-ui-margin-top',
-      ),
-      exposureUIMarginRight: this.#currentElement.getAttribute(
-        'exposure-ui-margin-right',
-      ),
-      exposureUIMarginBottom: this.#currentElement.getAttribute(
-        'exposure-ui-margin-bottom',
-      ),
-      exposureUIMarginLeft: this.#currentElement.getAttribute(
-        'exposure-ui-margin-left',
-      ),
-    };
-    if (this.#exposureEnabled) {
-      if (IntersectionObserver) {
-        const uiMargin = {
-          top: convertLengthToPx(
-            this.#currentElement,
-            newParams.exposureUIMarginTop,
-          ),
-          right: convertLengthToPx(
-            this.#currentElement,
-            newParams.exposureUIMarginRight,
-            true,
-          ),
-          bottom: convertLengthToPx(
-            this.#currentElement,
-            newParams.exposureUIMarginBottom,
-          ),
-          left: convertLengthToPx(
-            this.#currentElement,
-            newParams.exposureUIMarginLeft,
-            true,
-          ),
-        };
-        const screenMargin = {
-          top: convertLengthToPx(
-            this.#currentElement,
-            newParams.exposureScreenMarginTop,
-          ),
-          right: convertLengthToPx(
-            this.#currentElement,
-            newParams.exposureScreenMarginRight,
-            true,
-          ),
-          bottom: convertLengthToPx(
-            this.#currentElement,
-            newParams.exposureScreenMarginBottom,
-          ),
-          left: convertLengthToPx(
-            this.#currentElement,
-            newParams.exposureScreenMarginLeft,
-            true,
-          ),
-        };
-        /**
-         * TODO: @haoyang.wang support the switch `enableExposureUIMargin`
-         */
-        const calcedRootMargin = {
-          top: (uiMargin.bottom ? -1 : 1)
-            * (screenMargin.top - uiMargin.bottom),
-          right: (uiMargin.left ? -1 : 1)
-            * (screenMargin.right - uiMargin.left),
-          bottom: (uiMargin.top ? -1 : 1)
-            * (screenMargin.bottom - uiMargin.top),
-          left: (uiMargin.right ? -1 : 1)
-            * (screenMargin.left - uiMargin.right),
-        };
-        const exposureArea = this.#currentElement.getAttribute('exposure-area');
-        const rootMargin =
-          `${calcedRootMargin.top}px ${calcedRootMargin.right}px ${calcedRootMargin.bottom}px ${calcedRootMargin.left}px`;
-        const threshold = exposureArea ? parseFloat(exposureArea) / 100 : 0;
-        if (this.#exposureObserver) {
-          this.#exposureObserver.disconnect();
-        }
-
-        /**
-         * Get the closest scrollable ancestor
-         */
-        let root: HTMLElement | null = this.#currentElement.parentElement;
-        while (root) {
-          // @ts-expect-error
-          if (root[scrollContainerDom]) {
-            // @ts-expect-error
-            root = root[scrollContainerDom];
-            break;
-          } else {
-            root = root.parentElement;
-          }
-        }
-        this.#exposureTriggerd = false;
-        this.#exposureObserver = new IntersectionObserver(
-          ([entry]) => {
-            if (entry) {
-              if (entry.isIntersecting) {
-                this.#exposureTriggerd = true;
-              }
-              this.#sendOneExposureEvent(entry);
-            }
-          },
-          {
-            rootMargin,
-            threshold,
-            root,
-          },
-        );
-        this.#exposureObserver.observe(this.#currentElement);
-      }
-    } else {
-      this.disableExposure();
-    }
-  }
-
-  #sendOneExposureEvent(
-    entry: IntersectionObserverEntry | { isIntersecting: boolean },
-    overrideExposureId?: string,
-  ) {
-    if (!this.#exposureTriggerd) {
-      return;
-    }
-    const exposureID = overrideExposureId
-      ?? this.#currentElement.getAttribute('exposure-id') ?? '';
-    const exposureScene = this.#currentElement.getAttribute('exposure-scene')
-      ?? '';
-    const detail = {
-      'exposure-id': exposureID,
-      'exposure-scene': exposureScene,
-      exposureID,
-      exposureScene,
-    };
-    const appearEvent = new CustomEvent(
-      entry.isIntersecting ? 'uiappear' : 'uidisappear',
-      {
-        ...commonComponentEventSetting,
-        detail,
-      },
-    );
-    const exposureEvent = new CustomEvent(
-      entry.isIntersecting ? 'exposure' : 'disexposure',
-      {
-        bubbles: true,
-        composed: false,
-        cancelable: false,
-        detail,
-      },
-    );
-    Object.assign(appearEvent, detail);
-    this.#currentElement.dispatchEvent(appearEvent);
-    this.#currentElement.dispatchEvent(exposureEvent);
-  }
-
-  public disableExposure() {
-    if (this.#exposureObserver) {
-      this.#exposureObserver.disconnect();
-      this.#exposureObserver = undefined;
-    }
-  }
-}
diff --git a/packages/web-platform/web-elements/src/index.ts b/packages/web-platform/web-elements/src/index.ts
index 9465feeead..d6213bbe22 100644
--- a/packages/web-platform/web-elements/src/index.ts
+++ b/packages/web-platform/web-elements/src/index.ts
@@ -3,6 +3,6 @@
 // LICENSE file in the root directory of this source tree.
 
 export * from '@lynx-js/web-elements-reactive';
-export * from './common/Exposure.js';
+export * from './common/CommonEventsAndMethods.js';
 export * from './common/commonEventInitConfiguration.js';
 export * from './common/constants.js';
diff --git a/packages/web-platform/web-explorer/index.html b/packages/web-platform/web-explorer/index.html
index 82e8b418d9..ae99654830 100644
--- a/packages/web-platform/web-explorer/index.html
+++ b/packages/web-platform/web-explorer/index.html
@@ -8,11 +8,10 @@
     <link rel="icon" type="image/png" href="icons/icon-128x128.png">
     <link rel="stylesheet" href="dist/static/css/index.css">
     <title>Lynx Explorer on Web Platform</title>
-    <script type="module" src="./dist/static/js/index.js"></script>
     <script
-      src="https://fastly.jsdelivr.net/npm/@vant/touch-emulator"
-      defer
+      src="https://www.unpkg.com/@vant/touch-emulator@1.4.0/dist/index.js"
     ></script>
+    <script type="module" src="./dist/static/js/index.js"></script>
     <style>
     #install-button {
       position: fixed;
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 0728ca54e7..f065dbfc94 100644
--- a/packages/web-platform/web-tests/tests/web-elements.spec.ts
+++ b/packages/web-platform/web-tests/tests/web-elements.spec.ts
@@ -2750,11 +2750,33 @@ test.describe('web-elements test suite', () => {
     );
   });
 
-  test.describe('x-overlay', () => {
-    test('x-overlay-ng/basic-z-index', async ({ page }, { title }) => {
+  test.describe('x-overlay-ng', () => {
+    test('basic-z-index', async ({ page }, { titlePath }) => {
+      const title = getTitle(titlePath);
       await gotoWebComponentPage(page, title);
       await diffScreenShot(page, title, 'red-cover-next-z-staking-rect');
     });
+
+    test('event-layoutchange', async ({ page }, { titlePath }) => {
+      const title = getTitle(titlePath);
+      await gotoWebComponentPage(page, title);
+      await page.evaluate(() => {
+        document.getElementById('target')?.setAttribute('open', '');
+      });
+      await wait(100);
+      const detail = await page.evaluate(() => {
+        // @ts-expect-error
+        return globalThis.detail;
+      });
+      expect(detail).toBeTruthy();
+      expect(typeof detail.width).toBe('number');
+      expect(typeof detail.height).toBe('number');
+      expect(typeof detail.left).toBe('number');
+      expect(typeof detail.right).toBe('number');
+      expect(typeof detail.top).toBe('number');
+      expect(typeof detail.bottom).toBe('number');
+      expect(detail.id).toBe('target');
+    });
   });
 
   test.describe('x-refresh-view', () => {
diff --git a/packages/web-platform/web-tests/tests/web-elements/x-overlay-ng/event-layoutchange.html b/packages/web-platform/web-tests/tests/web-elements/x-overlay-ng/event-layoutchange.html
new file mode 100644
index 0000000000..768f3ee937
--- /dev/null
+++ b/packages/web-platform/web-tests/tests/web-elements/x-overlay-ng/event-layoutchange.html
@@ -0,0 +1,48 @@
+<!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");
+    </style>
+  </head>
+
+  <body>
+    <script src="/web-elements.js" defer></script>
+    <script type="module">
+    document.querySelector('#target').addEventListener('layoutchange', (ev) => {
+      console.log('layoutchange', ev.detail);
+      Object.assign(globalThis, { detail: ev.detail });
+    });
+    </script>
+    <x-view class="page">
+      <x-overlay-ng
+        id="target"
+        style="width:100px; height:400px; background-color: aquamarine;"
+      >
+      </x-overlay-ng>
+    </x-view>
+  </body>
+</html>