diff --git a/.changeset/good-books-move.md b/.changeset/good-books-move.md
new file mode 100644
index 0000000000..f390730459
--- /dev/null
+++ b/.changeset/good-books-move.md
@@ -0,0 +1,61 @@
+---
+'@builder.io/mitosis': patch
+---
+
+[angular, stencil]: Add `attributePassing` to enable passing attributes like `data-*`, `aria-*` or `class` to correct child.
+
+There is a wired behaviour for Angular and Stencil (without shadow DOM), where attributes are rendered on parent elements like this:
+
+**Input**
+
+```angular2html
+<!-- Angular -->
+<my-component class="cool" data-nice="true" aria-label="wow"></my-component>
+```
+
+**Output**
+
+```html
+<!-- DOM -->
+<my-component class="cool" data-nice="true" aria-label="wow">
+  <button class="my-component">My Component</button>
+</my-component>
+```
+
+In general, we want to pass those attributes down to the rendered child, like this:
+
+```html
+<!-- DOM -->
+<my-component>
+  <button class="my-component cool" data-nice="true" aria-label="wow">My Component</button>
+</my-component>
+```
+
+We provide 2 ways to enable this attribute passing:
+
+**Metadata**
+
+```tsx
+// my-component.lite.tsx
+useMetadata({
+  attributePassing: {
+    enabled: true,
+    // customRef: "_myRef";
+  },
+});
+```
+
+**Config**
+
+```js
+// mitosis.config.cjs
+module.exports = {
+  // ... other settings
+  attributePassing: {
+    enabled: true,
+    // customRef: "_myRef";
+  },
+};
+```
+
+If you enable the ``attributePassing`` we add a new `ref` to the root element named `_root` to interact with the DOM element. If you wish to control the name of the ref, because you already have a `useRef` on your root element, you can use the `customRef` property to select it.
diff --git a/packages/core/src/__tests__/__snapshots__/alpine.test.ts.snap b/packages/core/src/__tests__/__snapshots__/alpine.test.ts.snap
index 09c985ebb8..8756b7d8b3 100644
--- a/packages/core/src/__tests__/__snapshots__/alpine.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/alpine.test.ts.snap
@@ -1692,6 +1692,35 @@ exports[`Alpine.js > jsx > Javascript Test > basicOnUpdateReturn 1`] = `
 "
 `;
 
+exports[`Alpine.js > jsx > Javascript Test > basicRefAttributePassing 1`] = `
+"/** useMetadata: {\\"attributePassing\\":{\\"enabled\\":true}} */
+
+<button x-data=\\"basicRefAttributePassingComponent()\\" x-ref=\\"buttonRef\\">
+  Attribute Passing
+</button>
+<script>
+  document.addEventListener(\\"alpine:init\\", () => {
+    Alpine.data(\\"basicRefAttributePassingComponent\\", () => ({}));
+  });
+</script>
+"
+`;
+
+exports[`Alpine.js > jsx > Javascript Test > basicRefAttributePassingCustomRef 1`] = `
+"/** useMetadata: {\\"attributePassing\\":{\\"enabled\\":true,\\"customRef\\":\\"buttonRef\\"}}
+*/
+
+<div x-data=\\"basicRefAttributePassingCustomRefComponent()\\">
+  <button x-ref=\\"buttonRef\\">Attribute Passing</button>
+</div>
+<script>
+  document.addEventListener(\\"alpine:init\\", () => {
+    Alpine.data(\\"basicRefAttributePassingCustomRefComponent\\", () => ({}));
+  });
+</script>
+"
+`;
+
 exports[`Alpine.js > jsx > Javascript Test > class + ClassName + css 1`] = `
 "<style>
   .div {
@@ -4807,6 +4836,35 @@ exports[`Alpine.js > jsx > Typescript Test > basicOnUpdateReturn 1`] = `
 "
 `;
 
+exports[`Alpine.js > jsx > Typescript Test > basicRefAttributePassing 1`] = `
+"/** useMetadata: {\\"attributePassing\\":{\\"enabled\\":true}} */
+
+<button x-data=\\"basicRefAttributePassingComponent()\\" x-ref=\\"buttonRef\\">
+  Attribute Passing
+</button>
+<script>
+  document.addEventListener(\\"alpine:init\\", () => {
+    Alpine.data(\\"basicRefAttributePassingComponent\\", () => ({}));
+  });
+</script>
+"
+`;
+
+exports[`Alpine.js > jsx > Typescript Test > basicRefAttributePassingCustomRef 1`] = `
+"/** useMetadata: {\\"attributePassing\\":{\\"enabled\\":true,\\"customRef\\":\\"buttonRef\\"}}
+*/
+
+<div x-data=\\"basicRefAttributePassingCustomRefComponent()\\">
+  <button x-ref=\\"buttonRef\\">Attribute Passing</button>
+</div>
+<script>
+  document.addEventListener(\\"alpine:init\\", () => {
+    Alpine.data(\\"basicRefAttributePassingCustomRefComponent\\", () => ({}));
+  });
+</script>
+"
+`;
+
 exports[`Alpine.js > jsx > Typescript Test > class + ClassName + css 1`] = `
 "<style>
   .div {
diff --git a/packages/core/src/__tests__/__snapshots__/angular.import.test.ts.snap b/packages/core/src/__tests__/__snapshots__/angular.import.test.ts.snap
index fd29d4e5e0..09a330ab4b 100644
--- a/packages/core/src/__tests__/__snapshots__/angular.import.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/angular.import.test.ts.snap
@@ -3675,6 +3675,171 @@ export class MyBasicOnUpdateReturnComponentModule {}
 "
 `;
 
+exports[`Angular with Preserve Imports and File Extensions > jsx > Javascript Test > basicRefAttributePassing 1`] = `
+"/**
+          useMetadata:
+          {\\"attributePassing\\":{\\"enabled\\":true}}
+          */
+
+import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component, ViewChild, ElementRef } from \\"@angular/core\\";
+
+@Component({
+  selector: \\"basic-ref-attribute-passing-component\\",
+  template: \`
+    <button #buttonRef #_root>Attribute Passing</button>
+  \`,
+  styles: [
+    \`
+      :host {
+        display: contents;
+      }
+    \`,
+  ],
+})
+export default class BasicRefAttributePassingComponent {
+  @ViewChild(\\"buttonRef\\") buttonRef;
+  @ViewChild(\\"_root\\") _root;
+
+  /**
+   * Passes \`aria-*\`, \`data-*\` & \`class\` attributes to correct child. Used in angular and stencil.
+   * @param element  the ref for the component
+   * @param customElementSelector  the custom element like \`my-component\`
+   */
+  private enableAttributePassing(element, customElementSelector) {
+    const parent = element?.closest(customElementSelector);
+    if (element && parent) {
+      const attributes = parent.attributes;
+      for (let i = 0; i < attributes.length; i++) {
+        const attr = attributes.item(i);
+        if (
+          attr &&
+          (attr.name.startsWith(\\"data-\\") || attr.name.startsWith(\\"aria-\\"))
+        ) {
+          element.setAttribute(attr.name, attr.value);
+          parent.removeAttribute(attr.name);
+        }
+        if (attr && attr.name === \\"class\\") {
+          const isWebComponent = attr.value.includes(\\"hydrated\\");
+          const value = attr.value.replace(\\"hydrated\\", \\"\\").trim();
+          const currentClass = element.getAttribute(\\"class\\");
+          element.setAttribute(
+            attr.name,
+            \`\${currentClass ? \`\${currentClass} \` : \\"\\"}\${value}\`
+          );
+          if (isWebComponent) {
+            // Stencil is using this class for lazy loading component
+            parent.setAttribute(\\"class\\", \\"hydrated\\");
+          } else {
+            parent.removeAttribute(attr.name);
+          }
+        }
+      }
+    }
+  }
+
+  ngAfterViewInit() {
+    const element: HTMLElement | null = this._root?.nativeElement;
+    this.enableAttributePassing(
+      element,
+      \\"basic-ref-attribute-passing-component\\"
+    );
+  }
+}
+
+@NgModule({
+  declarations: [BasicRefAttributePassingComponent],
+  imports: [CommonModule],
+  exports: [BasicRefAttributePassingComponent],
+})
+export class BasicRefAttributePassingComponentModule {}
+"
+`;
+
+exports[`Angular with Preserve Imports and File Extensions > jsx > Javascript Test > basicRefAttributePassingCustomRef 1`] = `
+"/**
+          useMetadata:
+          {\\"attributePassing\\":{\\"enabled\\":true,\\"customRef\\":\\"buttonRef\\"}}
+          */
+
+import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component, ViewChild, ElementRef } from \\"@angular/core\\";
+
+@Component({
+  selector: \\"basic-ref-attribute-passing-custom-ref-component\\",
+  template: \`
+    <div><button #buttonRef>Attribute Passing</button></div>
+  \`,
+  styles: [
+    \`
+      :host {
+        display: contents;
+      }
+    \`,
+  ],
+})
+export default class BasicRefAttributePassingCustomRefComponent {
+  @ViewChild(\\"buttonRef\\") buttonRef;
+
+  /**
+   * Passes \`aria-*\`, \`data-*\` & \`class\` attributes to correct child. Used in angular and stencil.
+   * @param element  the ref for the component
+   * @param customElementSelector  the custom element like \`my-component\`
+   */
+  private enableAttributePassing(element, customElementSelector) {
+    const parent = element?.closest(customElementSelector);
+    if (element && parent) {
+      const attributes = parent.attributes;
+      for (let i = 0; i < attributes.length; i++) {
+        const attr = attributes.item(i);
+        if (
+          attr &&
+          (attr.name.startsWith(\\"data-\\") || attr.name.startsWith(\\"aria-\\"))
+        ) {
+          element.setAttribute(attr.name, attr.value);
+          parent.removeAttribute(attr.name);
+        }
+        if (attr && attr.name === \\"class\\") {
+          const isWebComponent = attr.value.includes(\\"hydrated\\");
+          const value = attr.value.replace(\\"hydrated\\", \\"\\").trim();
+          const currentClass = element.getAttribute(\\"class\\");
+          element.setAttribute(
+            attr.name,
+            \`\${currentClass ? \`\${currentClass} \` : \\"\\"}\${value}\`
+          );
+          if (isWebComponent) {
+            // Stencil is using this class for lazy loading component
+            parent.setAttribute(\\"class\\", \\"hydrated\\");
+          } else {
+            parent.removeAttribute(attr.name);
+          }
+        }
+      }
+    }
+  }
+
+  ngAfterViewInit() {
+    const element: HTMLElement | null = this.buttonRef?.nativeElement;
+    this.enableAttributePassing(
+      element,
+      \\"basic-ref-attribute-passing-custom-ref-component\\"
+    );
+  }
+}
+
+@NgModule({
+  declarations: [BasicRefAttributePassingCustomRefComponent],
+  imports: [CommonModule],
+  exports: [BasicRefAttributePassingCustomRefComponent],
+})
+export class BasicRefAttributePassingCustomRefComponentModule {}
+"
+`;
+
 exports[`Angular with Preserve Imports and File Extensions > jsx > Javascript Test > class + ClassName + css 1`] = `
 "import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
@@ -6892,6 +7057,9 @@ export default class StringLiteralStore {
 
 
 
+
+
+
 }
 
 @NgModule({
@@ -11485,6 +11653,177 @@ export class MyBasicOnUpdateReturnComponentModule {}
 "
 `;
 
+exports[`Angular with Preserve Imports and File Extensions > jsx > Typescript Test > basicRefAttributePassing 1`] = `
+"/**
+          useMetadata:
+          {\\"attributePassing\\":{\\"enabled\\":true}}
+          */
+
+import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component, ViewChild, ElementRef } from \\"@angular/core\\";
+
+@Component({
+  selector: \\"basic-ref-attribute-passing-component\\",
+  template: \`
+    <button #buttonRef #_root>Attribute Passing</button>
+  \`,
+  styles: [
+    \`
+      :host {
+        display: contents;
+      }
+    \`,
+  ],
+})
+export default class BasicRefAttributePassingComponent {
+  @ViewChild(\\"buttonRef\\") buttonRef!: ElementRef;
+  @ViewChild(\\"_root\\") _root!: ElementRef;
+
+  /**
+   * Passes \`aria-*\`, \`data-*\` & \`class\` attributes to correct child. Used in angular and stencil.
+   * @param element  the ref for the component
+   * @param customElementSelector  the custom element like \`my-component\`
+   */
+  private enableAttributePassing(
+    element: HTMLElement | null,
+    customElementSelector: string
+  ) {
+    const parent = element?.closest(customElementSelector);
+    if (element && parent) {
+      const attributes = parent.attributes;
+      for (let i = 0; i < attributes.length; i++) {
+        const attr = attributes.item(i);
+        if (
+          attr &&
+          (attr.name.startsWith(\\"data-\\") || attr.name.startsWith(\\"aria-\\"))
+        ) {
+          element.setAttribute(attr.name, attr.value);
+          parent.removeAttribute(attr.name);
+        }
+        if (attr && attr.name === \\"class\\") {
+          const isWebComponent = attr.value.includes(\\"hydrated\\");
+          const value = attr.value.replace(\\"hydrated\\", \\"\\").trim();
+          const currentClass = element.getAttribute(\\"class\\");
+          element.setAttribute(
+            attr.name,
+            \`\${currentClass ? \`\${currentClass} \` : \\"\\"}\${value}\`
+          );
+          if (isWebComponent) {
+            // Stencil is using this class for lazy loading component
+            parent.setAttribute(\\"class\\", \\"hydrated\\");
+          } else {
+            parent.removeAttribute(attr.name);
+          }
+        }
+      }
+    }
+  }
+
+  ngAfterViewInit() {
+    const element: HTMLElement | null = this._root?.nativeElement;
+    this.enableAttributePassing(
+      element,
+      \\"basic-ref-attribute-passing-component\\"
+    );
+  }
+}
+
+@NgModule({
+  declarations: [BasicRefAttributePassingComponent],
+  imports: [CommonModule],
+  exports: [BasicRefAttributePassingComponent],
+})
+export class BasicRefAttributePassingComponentModule {}
+"
+`;
+
+exports[`Angular with Preserve Imports and File Extensions > jsx > Typescript Test > basicRefAttributePassingCustomRef 1`] = `
+"/**
+          useMetadata:
+          {\\"attributePassing\\":{\\"enabled\\":true,\\"customRef\\":\\"buttonRef\\"}}
+          */
+
+import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component, ViewChild, ElementRef } from \\"@angular/core\\";
+
+@Component({
+  selector: \\"basic-ref-attribute-passing-custom-ref-component\\",
+  template: \`
+    <div><button #buttonRef>Attribute Passing</button></div>
+  \`,
+  styles: [
+    \`
+      :host {
+        display: contents;
+      }
+    \`,
+  ],
+})
+export default class BasicRefAttributePassingCustomRefComponent {
+  @ViewChild(\\"buttonRef\\") buttonRef!: ElementRef;
+
+  /**
+   * Passes \`aria-*\`, \`data-*\` & \`class\` attributes to correct child. Used in angular and stencil.
+   * @param element  the ref for the component
+   * @param customElementSelector  the custom element like \`my-component\`
+   */
+  private enableAttributePassing(
+    element: HTMLElement | null,
+    customElementSelector: string
+  ) {
+    const parent = element?.closest(customElementSelector);
+    if (element && parent) {
+      const attributes = parent.attributes;
+      for (let i = 0; i < attributes.length; i++) {
+        const attr = attributes.item(i);
+        if (
+          attr &&
+          (attr.name.startsWith(\\"data-\\") || attr.name.startsWith(\\"aria-\\"))
+        ) {
+          element.setAttribute(attr.name, attr.value);
+          parent.removeAttribute(attr.name);
+        }
+        if (attr && attr.name === \\"class\\") {
+          const isWebComponent = attr.value.includes(\\"hydrated\\");
+          const value = attr.value.replace(\\"hydrated\\", \\"\\").trim();
+          const currentClass = element.getAttribute(\\"class\\");
+          element.setAttribute(
+            attr.name,
+            \`\${currentClass ? \`\${currentClass} \` : \\"\\"}\${value}\`
+          );
+          if (isWebComponent) {
+            // Stencil is using this class for lazy loading component
+            parent.setAttribute(\\"class\\", \\"hydrated\\");
+          } else {
+            parent.removeAttribute(attr.name);
+          }
+        }
+      }
+    }
+  }
+
+  ngAfterViewInit() {
+    const element: HTMLElement | null = this.buttonRef?.nativeElement;
+    this.enableAttributePassing(
+      element,
+      \\"basic-ref-attribute-passing-custom-ref-component\\"
+    );
+  }
+}
+
+@NgModule({
+  declarations: [BasicRefAttributePassingCustomRefComponent],
+  imports: [CommonModule],
+  exports: [BasicRefAttributePassingCustomRefComponent],
+})
+export class BasicRefAttributePassingCustomRefComponentModule {}
+"
+`;
+
 exports[`Angular with Preserve Imports and File Extensions > jsx > Typescript Test > class + ClassName + css 1`] = `
 "import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
@@ -14877,6 +15216,9 @@ export default class StringLiteralStore {
 
 
 
+
+
+
 }
 
 @NgModule({
diff --git a/packages/core/src/__tests__/__snapshots__/angular.mapper.test.ts.snap b/packages/core/src/__tests__/__snapshots__/angular.mapper.test.ts.snap
index 678825f373..0960cd223b 100644
--- a/packages/core/src/__tests__/__snapshots__/angular.mapper.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/angular.mapper.test.ts.snap
@@ -3727,6 +3727,173 @@ export class MyBasicOnUpdateReturnComponentModule {}
 "
 `;
 
+exports[`Angular with Import Mapper Tests > jsx > Javascript Test > basicRefAttributePassing 1`] = `
+"/**
+          useMetadata:
+          {\\"attributePassing\\":{\\"enabled\\":true}}
+          */
+
+import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component, ViewChild, ElementRef } from \\"@angular/core\\";
+
+@Component({
+  selector: \\"basic-ref-attribute-passing-component\\",
+  template: \`
+    <button #buttonRef #_root>Attribute Passing</button>
+  \`,
+  styles: [
+    \`
+      :host {
+        display: contents;
+      }
+    \`,
+  ],
+})
+export default class BasicRefAttributePassingComponent {
+  @ViewChild(\\"buttonRef\\") buttonRef;
+  @ViewChild(\\"_root\\") _root;
+
+  /**
+   * Passes \`aria-*\`, \`data-*\` & \`class\` attributes to correct child. Used in angular and stencil.
+   * @param element  the ref for the component
+   * @param customElementSelector  the custom element like \`my-component\`
+   */
+  private enableAttributePassing(element, customElementSelector) {
+    const parent = element?.closest(customElementSelector);
+    if (element && parent) {
+      const attributes = parent.attributes;
+      for (let i = 0; i < attributes.length; i++) {
+        const attr = attributes.item(i);
+        if (
+          attr &&
+          (attr.name.startsWith(\\"data-\\") || attr.name.startsWith(\\"aria-\\"))
+        ) {
+          element.setAttribute(attr.name, attr.value);
+          parent.removeAttribute(attr.name);
+        }
+        if (attr && attr.name === \\"class\\") {
+          const isWebComponent = attr.value.includes(\\"hydrated\\");
+          const value = attr.value.replace(\\"hydrated\\", \\"\\").trim();
+          const currentClass = element.getAttribute(\\"class\\");
+          element.setAttribute(
+            attr.name,
+            \`\${currentClass ? \`\${currentClass} \` : \\"\\"}\${value}\`
+          );
+          if (isWebComponent) {
+            // Stencil is using this class for lazy loading component
+            parent.setAttribute(\\"class\\", \\"hydrated\\");
+          } else {
+            parent.removeAttribute(attr.name);
+          }
+        }
+      }
+    }
+  }
+
+  ngAfterViewInit() {
+    const element: HTMLElement | null = this._root?.nativeElement;
+    this.enableAttributePassing(
+      element,
+      \\"basic-ref-attribute-passing-component\\"
+    );
+  }
+}
+
+@NgModule({
+  declarations: [BasicRefAttributePassingComponent],
+  imports: [CommonModule],
+  exports: [BasicRefAttributePassingComponent],
+  bootstrap: [SomeOtherComponent],
+})
+export class BasicRefAttributePassingComponentModule {}
+"
+`;
+
+exports[`Angular with Import Mapper Tests > jsx > Javascript Test > basicRefAttributePassingCustomRef 1`] = `
+"/**
+          useMetadata:
+          {\\"attributePassing\\":{\\"enabled\\":true,\\"customRef\\":\\"buttonRef\\"}}
+          */
+
+import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component, ViewChild, ElementRef } from \\"@angular/core\\";
+
+@Component({
+  selector: \\"basic-ref-attribute-passing-custom-ref-component\\",
+  template: \`
+    <div><button #buttonRef>Attribute Passing</button></div>
+  \`,
+  styles: [
+    \`
+      :host {
+        display: contents;
+      }
+    \`,
+  ],
+})
+export default class BasicRefAttributePassingCustomRefComponent {
+  @ViewChild(\\"buttonRef\\") buttonRef;
+
+  /**
+   * Passes \`aria-*\`, \`data-*\` & \`class\` attributes to correct child. Used in angular and stencil.
+   * @param element  the ref for the component
+   * @param customElementSelector  the custom element like \`my-component\`
+   */
+  private enableAttributePassing(element, customElementSelector) {
+    const parent = element?.closest(customElementSelector);
+    if (element && parent) {
+      const attributes = parent.attributes;
+      for (let i = 0; i < attributes.length; i++) {
+        const attr = attributes.item(i);
+        if (
+          attr &&
+          (attr.name.startsWith(\\"data-\\") || attr.name.startsWith(\\"aria-\\"))
+        ) {
+          element.setAttribute(attr.name, attr.value);
+          parent.removeAttribute(attr.name);
+        }
+        if (attr && attr.name === \\"class\\") {
+          const isWebComponent = attr.value.includes(\\"hydrated\\");
+          const value = attr.value.replace(\\"hydrated\\", \\"\\").trim();
+          const currentClass = element.getAttribute(\\"class\\");
+          element.setAttribute(
+            attr.name,
+            \`\${currentClass ? \`\${currentClass} \` : \\"\\"}\${value}\`
+          );
+          if (isWebComponent) {
+            // Stencil is using this class for lazy loading component
+            parent.setAttribute(\\"class\\", \\"hydrated\\");
+          } else {
+            parent.removeAttribute(attr.name);
+          }
+        }
+      }
+    }
+  }
+
+  ngAfterViewInit() {
+    const element: HTMLElement | null = this.buttonRef?.nativeElement;
+    this.enableAttributePassing(
+      element,
+      \\"basic-ref-attribute-passing-custom-ref-component\\"
+    );
+  }
+}
+
+@NgModule({
+  declarations: [BasicRefAttributePassingCustomRefComponent],
+  imports: [CommonModule],
+  exports: [BasicRefAttributePassingCustomRefComponent],
+  bootstrap: [SomeOtherComponent],
+})
+export class BasicRefAttributePassingCustomRefComponentModule {}
+"
+`;
+
 exports[`Angular with Import Mapper Tests > jsx > Javascript Test > class + ClassName + css 1`] = `
 "import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
@@ -7005,6 +7172,9 @@ export default class StringLiteralStore {
 
 
 
+
+
+
 }
 
 @NgModule({
@@ -11665,6 +11835,179 @@ export class MyBasicOnUpdateReturnComponentModule {}
 "
 `;
 
+exports[`Angular with Import Mapper Tests > jsx > Typescript Test > basicRefAttributePassing 1`] = `
+"/**
+          useMetadata:
+          {\\"attributePassing\\":{\\"enabled\\":true}}
+          */
+
+import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component, ViewChild, ElementRef } from \\"@angular/core\\";
+
+@Component({
+  selector: \\"basic-ref-attribute-passing-component\\",
+  template: \`
+    <button #buttonRef #_root>Attribute Passing</button>
+  \`,
+  styles: [
+    \`
+      :host {
+        display: contents;
+      }
+    \`,
+  ],
+})
+export default class BasicRefAttributePassingComponent {
+  @ViewChild(\\"buttonRef\\") buttonRef!: ElementRef;
+  @ViewChild(\\"_root\\") _root!: ElementRef;
+
+  /**
+   * Passes \`aria-*\`, \`data-*\` & \`class\` attributes to correct child. Used in angular and stencil.
+   * @param element  the ref for the component
+   * @param customElementSelector  the custom element like \`my-component\`
+   */
+  private enableAttributePassing(
+    element: HTMLElement | null,
+    customElementSelector: string
+  ) {
+    const parent = element?.closest(customElementSelector);
+    if (element && parent) {
+      const attributes = parent.attributes;
+      for (let i = 0; i < attributes.length; i++) {
+        const attr = attributes.item(i);
+        if (
+          attr &&
+          (attr.name.startsWith(\\"data-\\") || attr.name.startsWith(\\"aria-\\"))
+        ) {
+          element.setAttribute(attr.name, attr.value);
+          parent.removeAttribute(attr.name);
+        }
+        if (attr && attr.name === \\"class\\") {
+          const isWebComponent = attr.value.includes(\\"hydrated\\");
+          const value = attr.value.replace(\\"hydrated\\", \\"\\").trim();
+          const currentClass = element.getAttribute(\\"class\\");
+          element.setAttribute(
+            attr.name,
+            \`\${currentClass ? \`\${currentClass} \` : \\"\\"}\${value}\`
+          );
+          if (isWebComponent) {
+            // Stencil is using this class for lazy loading component
+            parent.setAttribute(\\"class\\", \\"hydrated\\");
+          } else {
+            parent.removeAttribute(attr.name);
+          }
+        }
+      }
+    }
+  }
+
+  ngAfterViewInit() {
+    const element: HTMLElement | null = this._root?.nativeElement;
+    this.enableAttributePassing(
+      element,
+      \\"basic-ref-attribute-passing-component\\"
+    );
+  }
+}
+
+@NgModule({
+  declarations: [BasicRefAttributePassingComponent],
+  imports: [CommonModule],
+  exports: [BasicRefAttributePassingComponent],
+  bootstrap: [SomeOtherComponent],
+})
+export class BasicRefAttributePassingComponentModule {}
+"
+`;
+
+exports[`Angular with Import Mapper Tests > jsx > Typescript Test > basicRefAttributePassingCustomRef 1`] = `
+"/**
+          useMetadata:
+          {\\"attributePassing\\":{\\"enabled\\":true,\\"customRef\\":\\"buttonRef\\"}}
+          */
+
+import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component, ViewChild, ElementRef } from \\"@angular/core\\";
+
+@Component({
+  selector: \\"basic-ref-attribute-passing-custom-ref-component\\",
+  template: \`
+    <div><button #buttonRef>Attribute Passing</button></div>
+  \`,
+  styles: [
+    \`
+      :host {
+        display: contents;
+      }
+    \`,
+  ],
+})
+export default class BasicRefAttributePassingCustomRefComponent {
+  @ViewChild(\\"buttonRef\\") buttonRef!: ElementRef;
+
+  /**
+   * Passes \`aria-*\`, \`data-*\` & \`class\` attributes to correct child. Used in angular and stencil.
+   * @param element  the ref for the component
+   * @param customElementSelector  the custom element like \`my-component\`
+   */
+  private enableAttributePassing(
+    element: HTMLElement | null,
+    customElementSelector: string
+  ) {
+    const parent = element?.closest(customElementSelector);
+    if (element && parent) {
+      const attributes = parent.attributes;
+      for (let i = 0; i < attributes.length; i++) {
+        const attr = attributes.item(i);
+        if (
+          attr &&
+          (attr.name.startsWith(\\"data-\\") || attr.name.startsWith(\\"aria-\\"))
+        ) {
+          element.setAttribute(attr.name, attr.value);
+          parent.removeAttribute(attr.name);
+        }
+        if (attr && attr.name === \\"class\\") {
+          const isWebComponent = attr.value.includes(\\"hydrated\\");
+          const value = attr.value.replace(\\"hydrated\\", \\"\\").trim();
+          const currentClass = element.getAttribute(\\"class\\");
+          element.setAttribute(
+            attr.name,
+            \`\${currentClass ? \`\${currentClass} \` : \\"\\"}\${value}\`
+          );
+          if (isWebComponent) {
+            // Stencil is using this class for lazy loading component
+            parent.setAttribute(\\"class\\", \\"hydrated\\");
+          } else {
+            parent.removeAttribute(attr.name);
+          }
+        }
+      }
+    }
+  }
+
+  ngAfterViewInit() {
+    const element: HTMLElement | null = this.buttonRef?.nativeElement;
+    this.enableAttributePassing(
+      element,
+      \\"basic-ref-attribute-passing-custom-ref-component\\"
+    );
+  }
+}
+
+@NgModule({
+  declarations: [BasicRefAttributePassingCustomRefComponent],
+  imports: [CommonModule],
+  exports: [BasicRefAttributePassingCustomRefComponent],
+  bootstrap: [SomeOtherComponent],
+})
+export class BasicRefAttributePassingCustomRefComponentModule {}
+"
+`;
+
 exports[`Angular with Import Mapper Tests > jsx > Typescript Test > class + ClassName + css 1`] = `
 "import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
@@ -15120,6 +15463,9 @@ export default class StringLiteralStore {
 
 
 
+
+
+
 }
 
 @NgModule({
diff --git a/packages/core/src/__tests__/__snapshots__/angular.state.test.ts.snap b/packages/core/src/__tests__/__snapshots__/angular.state.test.ts.snap
index df0e55ee93..824024fc5c 100644
--- a/packages/core/src/__tests__/__snapshots__/angular.state.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/angular.state.test.ts.snap
@@ -3813,6 +3813,171 @@ export class MyBasicOnUpdateReturnComponentModule {}
 "
 `;
 
+exports[`Angular with manually creating and handling class properties as bindings (more stable) > jsx > Javascript Test > basicRefAttributePassing 1`] = `
+"/**
+          useMetadata:
+          {\\"attributePassing\\":{\\"enabled\\":true}}
+          */
+
+import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component, ViewChild, ElementRef } from \\"@angular/core\\";
+
+@Component({
+  selector: \\"basic-ref-attribute-passing-component\\",
+  template: \`
+    <button #buttonRef #_root>Attribute Passing</button>
+  \`,
+  styles: [
+    \`
+      :host {
+        display: contents;
+      }
+    \`,
+  ],
+})
+export default class BasicRefAttributePassingComponent {
+  @ViewChild(\\"buttonRef\\") buttonRef;
+  @ViewChild(\\"_root\\") _root;
+
+  /**
+   * Passes \`aria-*\`, \`data-*\` & \`class\` attributes to correct child. Used in angular and stencil.
+   * @param element  the ref for the component
+   * @param customElementSelector  the custom element like \`my-component\`
+   */
+  private enableAttributePassing(element, customElementSelector) {
+    const parent = element?.closest(customElementSelector);
+    if (element && parent) {
+      const attributes = parent.attributes;
+      for (let i = 0; i < attributes.length; i++) {
+        const attr = attributes.item(i);
+        if (
+          attr &&
+          (attr.name.startsWith(\\"data-\\") || attr.name.startsWith(\\"aria-\\"))
+        ) {
+          element.setAttribute(attr.name, attr.value);
+          parent.removeAttribute(attr.name);
+        }
+        if (attr && attr.name === \\"class\\") {
+          const isWebComponent = attr.value.includes(\\"hydrated\\");
+          const value = attr.value.replace(\\"hydrated\\", \\"\\").trim();
+          const currentClass = element.getAttribute(\\"class\\");
+          element.setAttribute(
+            attr.name,
+            \`\${currentClass ? \`\${currentClass} \` : \\"\\"}\${value}\`
+          );
+          if (isWebComponent) {
+            // Stencil is using this class for lazy loading component
+            parent.setAttribute(\\"class\\", \\"hydrated\\");
+          } else {
+            parent.removeAttribute(attr.name);
+          }
+        }
+      }
+    }
+  }
+
+  ngAfterViewInit() {
+    const element: HTMLElement | null = this._root?.nativeElement;
+    this.enableAttributePassing(
+      element,
+      \\"basic-ref-attribute-passing-component\\"
+    );
+  }
+}
+
+@NgModule({
+  declarations: [BasicRefAttributePassingComponent],
+  imports: [CommonModule],
+  exports: [BasicRefAttributePassingComponent],
+})
+export class BasicRefAttributePassingComponentModule {}
+"
+`;
+
+exports[`Angular with manually creating and handling class properties as bindings (more stable) > jsx > Javascript Test > basicRefAttributePassingCustomRef 1`] = `
+"/**
+          useMetadata:
+          {\\"attributePassing\\":{\\"enabled\\":true,\\"customRef\\":\\"buttonRef\\"}}
+          */
+
+import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component, ViewChild, ElementRef } from \\"@angular/core\\";
+
+@Component({
+  selector: \\"basic-ref-attribute-passing-custom-ref-component\\",
+  template: \`
+    <div><button #buttonRef>Attribute Passing</button></div>
+  \`,
+  styles: [
+    \`
+      :host {
+        display: contents;
+      }
+    \`,
+  ],
+})
+export default class BasicRefAttributePassingCustomRefComponent {
+  @ViewChild(\\"buttonRef\\") buttonRef;
+
+  /**
+   * Passes \`aria-*\`, \`data-*\` & \`class\` attributes to correct child. Used in angular and stencil.
+   * @param element  the ref for the component
+   * @param customElementSelector  the custom element like \`my-component\`
+   */
+  private enableAttributePassing(element, customElementSelector) {
+    const parent = element?.closest(customElementSelector);
+    if (element && parent) {
+      const attributes = parent.attributes;
+      for (let i = 0; i < attributes.length; i++) {
+        const attr = attributes.item(i);
+        if (
+          attr &&
+          (attr.name.startsWith(\\"data-\\") || attr.name.startsWith(\\"aria-\\"))
+        ) {
+          element.setAttribute(attr.name, attr.value);
+          parent.removeAttribute(attr.name);
+        }
+        if (attr && attr.name === \\"class\\") {
+          const isWebComponent = attr.value.includes(\\"hydrated\\");
+          const value = attr.value.replace(\\"hydrated\\", \\"\\").trim();
+          const currentClass = element.getAttribute(\\"class\\");
+          element.setAttribute(
+            attr.name,
+            \`\${currentClass ? \`\${currentClass} \` : \\"\\"}\${value}\`
+          );
+          if (isWebComponent) {
+            // Stencil is using this class for lazy loading component
+            parent.setAttribute(\\"class\\", \\"hydrated\\");
+          } else {
+            parent.removeAttribute(attr.name);
+          }
+        }
+      }
+    }
+  }
+
+  ngAfterViewInit() {
+    const element: HTMLElement | null = this.buttonRef?.nativeElement;
+    this.enableAttributePassing(
+      element,
+      \\"basic-ref-attribute-passing-custom-ref-component\\"
+    );
+  }
+}
+
+@NgModule({
+  declarations: [BasicRefAttributePassingCustomRefComponent],
+  imports: [CommonModule],
+  exports: [BasicRefAttributePassingCustomRefComponent],
+})
+export class BasicRefAttributePassingCustomRefComponentModule {}
+"
+`;
+
 exports[`Angular with manually creating and handling class properties as bindings (more stable) > jsx > Javascript Test > class + ClassName + css 1`] = `
 "import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
@@ -7100,6 +7265,9 @@ export default class StringLiteralStore {
 
 
 
+
+
+
 }
 
 @NgModule({
@@ -11899,6 +12067,177 @@ export class MyBasicOnUpdateReturnComponentModule {}
 "
 `;
 
+exports[`Angular with manually creating and handling class properties as bindings (more stable) > jsx > Typescript Test > basicRefAttributePassing 1`] = `
+"/**
+          useMetadata:
+          {\\"attributePassing\\":{\\"enabled\\":true}}
+          */
+
+import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component, ViewChild, ElementRef } from \\"@angular/core\\";
+
+@Component({
+  selector: \\"basic-ref-attribute-passing-component\\",
+  template: \`
+    <button #buttonRef #_root>Attribute Passing</button>
+  \`,
+  styles: [
+    \`
+      :host {
+        display: contents;
+      }
+    \`,
+  ],
+})
+export default class BasicRefAttributePassingComponent {
+  @ViewChild(\\"buttonRef\\") buttonRef!: ElementRef;
+  @ViewChild(\\"_root\\") _root!: ElementRef;
+
+  /**
+   * Passes \`aria-*\`, \`data-*\` & \`class\` attributes to correct child. Used in angular and stencil.
+   * @param element  the ref for the component
+   * @param customElementSelector  the custom element like \`my-component\`
+   */
+  private enableAttributePassing(
+    element: HTMLElement | null,
+    customElementSelector: string
+  ) {
+    const parent = element?.closest(customElementSelector);
+    if (element && parent) {
+      const attributes = parent.attributes;
+      for (let i = 0; i < attributes.length; i++) {
+        const attr = attributes.item(i);
+        if (
+          attr &&
+          (attr.name.startsWith(\\"data-\\") || attr.name.startsWith(\\"aria-\\"))
+        ) {
+          element.setAttribute(attr.name, attr.value);
+          parent.removeAttribute(attr.name);
+        }
+        if (attr && attr.name === \\"class\\") {
+          const isWebComponent = attr.value.includes(\\"hydrated\\");
+          const value = attr.value.replace(\\"hydrated\\", \\"\\").trim();
+          const currentClass = element.getAttribute(\\"class\\");
+          element.setAttribute(
+            attr.name,
+            \`\${currentClass ? \`\${currentClass} \` : \\"\\"}\${value}\`
+          );
+          if (isWebComponent) {
+            // Stencil is using this class for lazy loading component
+            parent.setAttribute(\\"class\\", \\"hydrated\\");
+          } else {
+            parent.removeAttribute(attr.name);
+          }
+        }
+      }
+    }
+  }
+
+  ngAfterViewInit() {
+    const element: HTMLElement | null = this._root?.nativeElement;
+    this.enableAttributePassing(
+      element,
+      \\"basic-ref-attribute-passing-component\\"
+    );
+  }
+}
+
+@NgModule({
+  declarations: [BasicRefAttributePassingComponent],
+  imports: [CommonModule],
+  exports: [BasicRefAttributePassingComponent],
+})
+export class BasicRefAttributePassingComponentModule {}
+"
+`;
+
+exports[`Angular with manually creating and handling class properties as bindings (more stable) > jsx > Typescript Test > basicRefAttributePassingCustomRef 1`] = `
+"/**
+          useMetadata:
+          {\\"attributePassing\\":{\\"enabled\\":true,\\"customRef\\":\\"buttonRef\\"}}
+          */
+
+import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component, ViewChild, ElementRef } from \\"@angular/core\\";
+
+@Component({
+  selector: \\"basic-ref-attribute-passing-custom-ref-component\\",
+  template: \`
+    <div><button #buttonRef>Attribute Passing</button></div>
+  \`,
+  styles: [
+    \`
+      :host {
+        display: contents;
+      }
+    \`,
+  ],
+})
+export default class BasicRefAttributePassingCustomRefComponent {
+  @ViewChild(\\"buttonRef\\") buttonRef!: ElementRef;
+
+  /**
+   * Passes \`aria-*\`, \`data-*\` & \`class\` attributes to correct child. Used in angular and stencil.
+   * @param element  the ref for the component
+   * @param customElementSelector  the custom element like \`my-component\`
+   */
+  private enableAttributePassing(
+    element: HTMLElement | null,
+    customElementSelector: string
+  ) {
+    const parent = element?.closest(customElementSelector);
+    if (element && parent) {
+      const attributes = parent.attributes;
+      for (let i = 0; i < attributes.length; i++) {
+        const attr = attributes.item(i);
+        if (
+          attr &&
+          (attr.name.startsWith(\\"data-\\") || attr.name.startsWith(\\"aria-\\"))
+        ) {
+          element.setAttribute(attr.name, attr.value);
+          parent.removeAttribute(attr.name);
+        }
+        if (attr && attr.name === \\"class\\") {
+          const isWebComponent = attr.value.includes(\\"hydrated\\");
+          const value = attr.value.replace(\\"hydrated\\", \\"\\").trim();
+          const currentClass = element.getAttribute(\\"class\\");
+          element.setAttribute(
+            attr.name,
+            \`\${currentClass ? \`\${currentClass} \` : \\"\\"}\${value}\`
+          );
+          if (isWebComponent) {
+            // Stencil is using this class for lazy loading component
+            parent.setAttribute(\\"class\\", \\"hydrated\\");
+          } else {
+            parent.removeAttribute(attr.name);
+          }
+        }
+      }
+    }
+  }
+
+  ngAfterViewInit() {
+    const element: HTMLElement | null = this.buttonRef?.nativeElement;
+    this.enableAttributePassing(
+      element,
+      \\"basic-ref-attribute-passing-custom-ref-component\\"
+    );
+  }
+}
+
+@NgModule({
+  declarations: [BasicRefAttributePassingCustomRefComponent],
+  imports: [CommonModule],
+  exports: [BasicRefAttributePassingCustomRefComponent],
+})
+export class BasicRefAttributePassingCustomRefComponentModule {}
+"
+`;
+
 exports[`Angular with manually creating and handling class properties as bindings (more stable) > jsx > Typescript Test > class + ClassName + css 1`] = `
 "import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
@@ -15362,6 +15701,9 @@ export default class StringLiteralStore {
 
 
 
+
+
+
 }
 
 @NgModule({
diff --git a/packages/core/src/__tests__/__snapshots__/angular.styles.test.ts.snap b/packages/core/src/__tests__/__snapshots__/angular.styles.test.ts.snap
index dfef1606d6..fbce483fb8 100644
--- a/packages/core/src/__tests__/__snapshots__/angular.styles.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/angular.styles.test.ts.snap
@@ -3347,6 +3347,157 @@ export class MyBasicOnUpdateReturnComponentModule {}
 "
 `;
 
+exports[`Angular with visuallyIgnoreHostElement = false > jsx > Javascript Test > basicRefAttributePassing 1`] = `
+"/**
+          useMetadata:
+          {\\"attributePassing\\":{\\"enabled\\":true}}
+          */
+
+import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component, ViewChild, ElementRef } from \\"@angular/core\\";
+
+@Component({
+  selector: \\"basic-ref-attribute-passing-component\\",
+  template: \`
+    <button #buttonRef #_root>Attribute Passing</button>
+  \`,
+})
+export default class BasicRefAttributePassingComponent {
+  @ViewChild(\\"buttonRef\\") buttonRef;
+  @ViewChild(\\"_root\\") _root;
+
+  /**
+   * Passes \`aria-*\`, \`data-*\` & \`class\` attributes to correct child. Used in angular and stencil.
+   * @param element  the ref for the component
+   * @param customElementSelector  the custom element like \`my-component\`
+   */
+  private enableAttributePassing(element, customElementSelector) {
+    const parent = element?.closest(customElementSelector);
+    if (element && parent) {
+      const attributes = parent.attributes;
+      for (let i = 0; i < attributes.length; i++) {
+        const attr = attributes.item(i);
+        if (
+          attr &&
+          (attr.name.startsWith(\\"data-\\") || attr.name.startsWith(\\"aria-\\"))
+        ) {
+          element.setAttribute(attr.name, attr.value);
+          parent.removeAttribute(attr.name);
+        }
+        if (attr && attr.name === \\"class\\") {
+          const isWebComponent = attr.value.includes(\\"hydrated\\");
+          const value = attr.value.replace(\\"hydrated\\", \\"\\").trim();
+          const currentClass = element.getAttribute(\\"class\\");
+          element.setAttribute(
+            attr.name,
+            \`\${currentClass ? \`\${currentClass} \` : \\"\\"}\${value}\`
+          );
+          if (isWebComponent) {
+            // Stencil is using this class for lazy loading component
+            parent.setAttribute(\\"class\\", \\"hydrated\\");
+          } else {
+            parent.removeAttribute(attr.name);
+          }
+        }
+      }
+    }
+  }
+
+  ngAfterViewInit() {
+    const element: HTMLElement | null = this._root?.nativeElement;
+    this.enableAttributePassing(
+      element,
+      \\"basic-ref-attribute-passing-component\\"
+    );
+  }
+}
+
+@NgModule({
+  declarations: [BasicRefAttributePassingComponent],
+  imports: [CommonModule],
+  exports: [BasicRefAttributePassingComponent],
+})
+export class BasicRefAttributePassingComponentModule {}
+"
+`;
+
+exports[`Angular with visuallyIgnoreHostElement = false > jsx > Javascript Test > basicRefAttributePassingCustomRef 1`] = `
+"/**
+          useMetadata:
+          {\\"attributePassing\\":{\\"enabled\\":true,\\"customRef\\":\\"buttonRef\\"}}
+          */
+
+import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component, ViewChild, ElementRef } from \\"@angular/core\\";
+
+@Component({
+  selector: \\"basic-ref-attribute-passing-custom-ref-component\\",
+  template: \`
+    <div><button #buttonRef>Attribute Passing</button></div>
+  \`,
+})
+export default class BasicRefAttributePassingCustomRefComponent {
+  @ViewChild(\\"buttonRef\\") buttonRef;
+
+  /**
+   * Passes \`aria-*\`, \`data-*\` & \`class\` attributes to correct child. Used in angular and stencil.
+   * @param element  the ref for the component
+   * @param customElementSelector  the custom element like \`my-component\`
+   */
+  private enableAttributePassing(element, customElementSelector) {
+    const parent = element?.closest(customElementSelector);
+    if (element && parent) {
+      const attributes = parent.attributes;
+      for (let i = 0; i < attributes.length; i++) {
+        const attr = attributes.item(i);
+        if (
+          attr &&
+          (attr.name.startsWith(\\"data-\\") || attr.name.startsWith(\\"aria-\\"))
+        ) {
+          element.setAttribute(attr.name, attr.value);
+          parent.removeAttribute(attr.name);
+        }
+        if (attr && attr.name === \\"class\\") {
+          const isWebComponent = attr.value.includes(\\"hydrated\\");
+          const value = attr.value.replace(\\"hydrated\\", \\"\\").trim();
+          const currentClass = element.getAttribute(\\"class\\");
+          element.setAttribute(
+            attr.name,
+            \`\${currentClass ? \`\${currentClass} \` : \\"\\"}\${value}\`
+          );
+          if (isWebComponent) {
+            // Stencil is using this class for lazy loading component
+            parent.setAttribute(\\"class\\", \\"hydrated\\");
+          } else {
+            parent.removeAttribute(attr.name);
+          }
+        }
+      }
+    }
+  }
+
+  ngAfterViewInit() {
+    const element: HTMLElement | null = this.buttonRef?.nativeElement;
+    this.enableAttributePassing(
+      element,
+      \\"basic-ref-attribute-passing-custom-ref-component\\"
+    );
+  }
+}
+
+@NgModule({
+  declarations: [BasicRefAttributePassingCustomRefComponent],
+  imports: [CommonModule],
+  exports: [BasicRefAttributePassingCustomRefComponent],
+})
+export class BasicRefAttributePassingCustomRefComponentModule {}
+"
+`;
+
 exports[`Angular with visuallyIgnoreHostElement = false > jsx > Javascript Test > class + ClassName + css 1`] = `
 "import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
@@ -6159,6 +6310,9 @@ export default class StringLiteralStore {
 
 
 
+
+
+
 }
 
 @NgModule({
@@ -10337,6 +10491,163 @@ export class MyBasicOnUpdateReturnComponentModule {}
 "
 `;
 
+exports[`Angular with visuallyIgnoreHostElement = false > jsx > Typescript Test > basicRefAttributePassing 1`] = `
+"/**
+          useMetadata:
+          {\\"attributePassing\\":{\\"enabled\\":true}}
+          */
+
+import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component, ViewChild, ElementRef } from \\"@angular/core\\";
+
+@Component({
+  selector: \\"basic-ref-attribute-passing-component\\",
+  template: \`
+    <button #buttonRef #_root>Attribute Passing</button>
+  \`,
+})
+export default class BasicRefAttributePassingComponent {
+  @ViewChild(\\"buttonRef\\") buttonRef!: ElementRef;
+  @ViewChild(\\"_root\\") _root!: ElementRef;
+
+  /**
+   * Passes \`aria-*\`, \`data-*\` & \`class\` attributes to correct child. Used in angular and stencil.
+   * @param element  the ref for the component
+   * @param customElementSelector  the custom element like \`my-component\`
+   */
+  private enableAttributePassing(
+    element: HTMLElement | null,
+    customElementSelector: string
+  ) {
+    const parent = element?.closest(customElementSelector);
+    if (element && parent) {
+      const attributes = parent.attributes;
+      for (let i = 0; i < attributes.length; i++) {
+        const attr = attributes.item(i);
+        if (
+          attr &&
+          (attr.name.startsWith(\\"data-\\") || attr.name.startsWith(\\"aria-\\"))
+        ) {
+          element.setAttribute(attr.name, attr.value);
+          parent.removeAttribute(attr.name);
+        }
+        if (attr && attr.name === \\"class\\") {
+          const isWebComponent = attr.value.includes(\\"hydrated\\");
+          const value = attr.value.replace(\\"hydrated\\", \\"\\").trim();
+          const currentClass = element.getAttribute(\\"class\\");
+          element.setAttribute(
+            attr.name,
+            \`\${currentClass ? \`\${currentClass} \` : \\"\\"}\${value}\`
+          );
+          if (isWebComponent) {
+            // Stencil is using this class for lazy loading component
+            parent.setAttribute(\\"class\\", \\"hydrated\\");
+          } else {
+            parent.removeAttribute(attr.name);
+          }
+        }
+      }
+    }
+  }
+
+  ngAfterViewInit() {
+    const element: HTMLElement | null = this._root?.nativeElement;
+    this.enableAttributePassing(
+      element,
+      \\"basic-ref-attribute-passing-component\\"
+    );
+  }
+}
+
+@NgModule({
+  declarations: [BasicRefAttributePassingComponent],
+  imports: [CommonModule],
+  exports: [BasicRefAttributePassingComponent],
+})
+export class BasicRefAttributePassingComponentModule {}
+"
+`;
+
+exports[`Angular with visuallyIgnoreHostElement = false > jsx > Typescript Test > basicRefAttributePassingCustomRef 1`] = `
+"/**
+          useMetadata:
+          {\\"attributePassing\\":{\\"enabled\\":true,\\"customRef\\":\\"buttonRef\\"}}
+          */
+
+import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component, ViewChild, ElementRef } from \\"@angular/core\\";
+
+@Component({
+  selector: \\"basic-ref-attribute-passing-custom-ref-component\\",
+  template: \`
+    <div><button #buttonRef>Attribute Passing</button></div>
+  \`,
+})
+export default class BasicRefAttributePassingCustomRefComponent {
+  @ViewChild(\\"buttonRef\\") buttonRef!: ElementRef;
+
+  /**
+   * Passes \`aria-*\`, \`data-*\` & \`class\` attributes to correct child. Used in angular and stencil.
+   * @param element  the ref for the component
+   * @param customElementSelector  the custom element like \`my-component\`
+   */
+  private enableAttributePassing(
+    element: HTMLElement | null,
+    customElementSelector: string
+  ) {
+    const parent = element?.closest(customElementSelector);
+    if (element && parent) {
+      const attributes = parent.attributes;
+      for (let i = 0; i < attributes.length; i++) {
+        const attr = attributes.item(i);
+        if (
+          attr &&
+          (attr.name.startsWith(\\"data-\\") || attr.name.startsWith(\\"aria-\\"))
+        ) {
+          element.setAttribute(attr.name, attr.value);
+          parent.removeAttribute(attr.name);
+        }
+        if (attr && attr.name === \\"class\\") {
+          const isWebComponent = attr.value.includes(\\"hydrated\\");
+          const value = attr.value.replace(\\"hydrated\\", \\"\\").trim();
+          const currentClass = element.getAttribute(\\"class\\");
+          element.setAttribute(
+            attr.name,
+            \`\${currentClass ? \`\${currentClass} \` : \\"\\"}\${value}\`
+          );
+          if (isWebComponent) {
+            // Stencil is using this class for lazy loading component
+            parent.setAttribute(\\"class\\", \\"hydrated\\");
+          } else {
+            parent.removeAttribute(attr.name);
+          }
+        }
+      }
+    }
+  }
+
+  ngAfterViewInit() {
+    const element: HTMLElement | null = this.buttonRef?.nativeElement;
+    this.enableAttributePassing(
+      element,
+      \\"basic-ref-attribute-passing-custom-ref-component\\"
+    );
+  }
+}
+
+@NgModule({
+  declarations: [BasicRefAttributePassingCustomRefComponent],
+  imports: [CommonModule],
+  exports: [BasicRefAttributePassingCustomRefComponent],
+})
+export class BasicRefAttributePassingCustomRefComponentModule {}
+"
+`;
+
 exports[`Angular with visuallyIgnoreHostElement = false > jsx > Typescript Test > class + ClassName + css 1`] = `
 "import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
@@ -13323,6 +13634,9 @@ export default class StringLiteralStore {
 
 
 
+
+
+
 }
 
 @NgModule({
diff --git a/packages/core/src/__tests__/__snapshots__/angular.test.ts.snap b/packages/core/src/__tests__/__snapshots__/angular.test.ts.snap
index 7da64dcada..290d3eefb3 100644
--- a/packages/core/src/__tests__/__snapshots__/angular.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/angular.test.ts.snap
@@ -6982,6 +6982,322 @@ export default class MyBasicOnUpdateReturnComponent {
 "
 `;
 
+exports[`Angular > jsx > Javascript Test > basicRefAttributePassing 1`] = `
+"/**
+          useMetadata:
+          {\\"attributePassing\\":{\\"enabled\\":true}}
+          */
+
+import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component, ViewChild, ElementRef } from \\"@angular/core\\";
+
+@Component({
+  selector: \\"basic-ref-attribute-passing-component\\",
+  template: \`
+    <button #buttonRef #_root>Attribute Passing</button>
+  \`,
+  styles: [
+    \`
+      :host {
+        display: contents;
+      }
+    \`,
+  ],
+})
+export default class BasicRefAttributePassingComponent {
+  @ViewChild(\\"buttonRef\\") buttonRef;
+  @ViewChild(\\"_root\\") _root;
+
+  /**
+   * Passes \`aria-*\`, \`data-*\` & \`class\` attributes to correct child. Used in angular and stencil.
+   * @param element  the ref for the component
+   * @param customElementSelector  the custom element like \`my-component\`
+   */
+  private enableAttributePassing(element, customElementSelector) {
+    const parent = element?.closest(customElementSelector);
+    if (element && parent) {
+      const attributes = parent.attributes;
+      for (let i = 0; i < attributes.length; i++) {
+        const attr = attributes.item(i);
+        if (
+          attr &&
+          (attr.name.startsWith(\\"data-\\") || attr.name.startsWith(\\"aria-\\"))
+        ) {
+          element.setAttribute(attr.name, attr.value);
+          parent.removeAttribute(attr.name);
+        }
+        if (attr && attr.name === \\"class\\") {
+          const isWebComponent = attr.value.includes(\\"hydrated\\");
+          const value = attr.value.replace(\\"hydrated\\", \\"\\").trim();
+          const currentClass = element.getAttribute(\\"class\\");
+          element.setAttribute(
+            attr.name,
+            \`\${currentClass ? \`\${currentClass} \` : \\"\\"}\${value}\`
+          );
+          if (isWebComponent) {
+            // Stencil is using this class for lazy loading component
+            parent.setAttribute(\\"class\\", \\"hydrated\\");
+          } else {
+            parent.removeAttribute(attr.name);
+          }
+        }
+      }
+    }
+  }
+
+  ngAfterViewInit() {
+    const element: HTMLElement | null = this._root?.nativeElement;
+    this.enableAttributePassing(
+      element,
+      \\"basic-ref-attribute-passing-component\\"
+    );
+  }
+}
+
+@NgModule({
+  declarations: [BasicRefAttributePassingComponent],
+  imports: [CommonModule],
+  exports: [BasicRefAttributePassingComponent],
+})
+export class BasicRefAttributePassingComponentModule {}
+"
+`;
+
+exports[`Angular > jsx > Javascript Test > basicRefAttributePassing 2`] = `
+"/**
+          useMetadata:
+          {\\"attributePassing\\":{\\"enabled\\":true}}
+          */
+
+import { Component, ViewChild, ElementRef } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+@Component({
+  selector: \\"basic-ref-attribute-passing-component\\",
+  template: \`
+    <button #buttonRef #_root>Attribute Passing</button>
+  \`,
+  styles: [
+    \`
+      :host {
+        display: contents;
+      }
+    \`,
+  ],
+  standalone: true,
+  imports: [CommonModule],
+})
+export default class BasicRefAttributePassingComponent {
+  @ViewChild(\\"buttonRef\\") buttonRef;
+  @ViewChild(\\"_root\\") _root;
+
+  /**
+   * Passes \`aria-*\`, \`data-*\` & \`class\` attributes to correct child. Used in angular and stencil.
+   * @param element  the ref for the component
+   * @param customElementSelector  the custom element like \`my-component\`
+   */
+  private enableAttributePassing(element, customElementSelector) {
+    const parent = element?.closest(customElementSelector);
+    if (element && parent) {
+      const attributes = parent.attributes;
+      for (let i = 0; i < attributes.length; i++) {
+        const attr = attributes.item(i);
+        if (
+          attr &&
+          (attr.name.startsWith(\\"data-\\") || attr.name.startsWith(\\"aria-\\"))
+        ) {
+          element.setAttribute(attr.name, attr.value);
+          parent.removeAttribute(attr.name);
+        }
+        if (attr && attr.name === \\"class\\") {
+          const isWebComponent = attr.value.includes(\\"hydrated\\");
+          const value = attr.value.replace(\\"hydrated\\", \\"\\").trim();
+          const currentClass = element.getAttribute(\\"class\\");
+          element.setAttribute(
+            attr.name,
+            \`\${currentClass ? \`\${currentClass} \` : \\"\\"}\${value}\`
+          );
+          if (isWebComponent) {
+            // Stencil is using this class for lazy loading component
+            parent.setAttribute(\\"class\\", \\"hydrated\\");
+          } else {
+            parent.removeAttribute(attr.name);
+          }
+        }
+      }
+    }
+  }
+
+  ngAfterViewInit() {
+    const element: HTMLElement | null = this._root?.nativeElement;
+    this.enableAttributePassing(
+      element,
+      \\"basic-ref-attribute-passing-component\\"
+    );
+  }
+}
+"
+`;
+
+exports[`Angular > jsx > Javascript Test > basicRefAttributePassingCustomRef 1`] = `
+"/**
+          useMetadata:
+          {\\"attributePassing\\":{\\"enabled\\":true,\\"customRef\\":\\"buttonRef\\"}}
+          */
+
+import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component, ViewChild, ElementRef } from \\"@angular/core\\";
+
+@Component({
+  selector: \\"basic-ref-attribute-passing-custom-ref-component\\",
+  template: \`
+    <div><button #buttonRef>Attribute Passing</button></div>
+  \`,
+  styles: [
+    \`
+      :host {
+        display: contents;
+      }
+    \`,
+  ],
+})
+export default class BasicRefAttributePassingCustomRefComponent {
+  @ViewChild(\\"buttonRef\\") buttonRef;
+
+  /**
+   * Passes \`aria-*\`, \`data-*\` & \`class\` attributes to correct child. Used in angular and stencil.
+   * @param element  the ref for the component
+   * @param customElementSelector  the custom element like \`my-component\`
+   */
+  private enableAttributePassing(element, customElementSelector) {
+    const parent = element?.closest(customElementSelector);
+    if (element && parent) {
+      const attributes = parent.attributes;
+      for (let i = 0; i < attributes.length; i++) {
+        const attr = attributes.item(i);
+        if (
+          attr &&
+          (attr.name.startsWith(\\"data-\\") || attr.name.startsWith(\\"aria-\\"))
+        ) {
+          element.setAttribute(attr.name, attr.value);
+          parent.removeAttribute(attr.name);
+        }
+        if (attr && attr.name === \\"class\\") {
+          const isWebComponent = attr.value.includes(\\"hydrated\\");
+          const value = attr.value.replace(\\"hydrated\\", \\"\\").trim();
+          const currentClass = element.getAttribute(\\"class\\");
+          element.setAttribute(
+            attr.name,
+            \`\${currentClass ? \`\${currentClass} \` : \\"\\"}\${value}\`
+          );
+          if (isWebComponent) {
+            // Stencil is using this class for lazy loading component
+            parent.setAttribute(\\"class\\", \\"hydrated\\");
+          } else {
+            parent.removeAttribute(attr.name);
+          }
+        }
+      }
+    }
+  }
+
+  ngAfterViewInit() {
+    const element: HTMLElement | null = this.buttonRef?.nativeElement;
+    this.enableAttributePassing(
+      element,
+      \\"basic-ref-attribute-passing-custom-ref-component\\"
+    );
+  }
+}
+
+@NgModule({
+  declarations: [BasicRefAttributePassingCustomRefComponent],
+  imports: [CommonModule],
+  exports: [BasicRefAttributePassingCustomRefComponent],
+})
+export class BasicRefAttributePassingCustomRefComponentModule {}
+"
+`;
+
+exports[`Angular > jsx > Javascript Test > basicRefAttributePassingCustomRef 2`] = `
+"/**
+          useMetadata:
+          {\\"attributePassing\\":{\\"enabled\\":true,\\"customRef\\":\\"buttonRef\\"}}
+          */
+
+import { Component, ViewChild, ElementRef } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+@Component({
+  selector: \\"basic-ref-attribute-passing-custom-ref-component\\",
+  template: \`
+    <div><button #buttonRef>Attribute Passing</button></div>
+  \`,
+  styles: [
+    \`
+      :host {
+        display: contents;
+      }
+    \`,
+  ],
+  standalone: true,
+  imports: [CommonModule],
+})
+export default class BasicRefAttributePassingCustomRefComponent {
+  @ViewChild(\\"buttonRef\\") buttonRef;
+
+  /**
+   * Passes \`aria-*\`, \`data-*\` & \`class\` attributes to correct child. Used in angular and stencil.
+   * @param element  the ref for the component
+   * @param customElementSelector  the custom element like \`my-component\`
+   */
+  private enableAttributePassing(element, customElementSelector) {
+    const parent = element?.closest(customElementSelector);
+    if (element && parent) {
+      const attributes = parent.attributes;
+      for (let i = 0; i < attributes.length; i++) {
+        const attr = attributes.item(i);
+        if (
+          attr &&
+          (attr.name.startsWith(\\"data-\\") || attr.name.startsWith(\\"aria-\\"))
+        ) {
+          element.setAttribute(attr.name, attr.value);
+          parent.removeAttribute(attr.name);
+        }
+        if (attr && attr.name === \\"class\\") {
+          const isWebComponent = attr.value.includes(\\"hydrated\\");
+          const value = attr.value.replace(\\"hydrated\\", \\"\\").trim();
+          const currentClass = element.getAttribute(\\"class\\");
+          element.setAttribute(
+            attr.name,
+            \`\${currentClass ? \`\${currentClass} \` : \\"\\"}\${value}\`
+          );
+          if (isWebComponent) {
+            // Stencil is using this class for lazy loading component
+            parent.setAttribute(\\"class\\", \\"hydrated\\");
+          } else {
+            parent.removeAttribute(attr.name);
+          }
+        }
+      }
+    }
+  }
+
+  ngAfterViewInit() {
+    const element: HTMLElement | null = this.buttonRef?.nativeElement;
+    this.enableAttributePassing(
+      element,
+      \\"basic-ref-attribute-passing-custom-ref-component\\"
+    );
+  }
+}
+"
+`;
+
 exports[`Angular > jsx > Javascript Test > class + ClassName + css 1`] = `
 "import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
@@ -12919,6 +13235,9 @@ export default class StringLiteralStore {
 
 
 
+
+
+
 }
 
 @NgModule({
@@ -12982,6 +13301,9 @@ export default class StringLiteralStore {
 
 
 
+
+
+
 }"
 `;
 
@@ -21674,6 +21996,334 @@ export default class MyBasicOnUpdateReturnComponent {
 "
 `;
 
+exports[`Angular > jsx > Typescript Test > basicRefAttributePassing 1`] = `
+"/**
+          useMetadata:
+          {\\"attributePassing\\":{\\"enabled\\":true}}
+          */
+
+import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component, ViewChild, ElementRef } from \\"@angular/core\\";
+
+@Component({
+  selector: \\"basic-ref-attribute-passing-component\\",
+  template: \`
+    <button #buttonRef #_root>Attribute Passing</button>
+  \`,
+  styles: [
+    \`
+      :host {
+        display: contents;
+      }
+    \`,
+  ],
+})
+export default class BasicRefAttributePassingComponent {
+  @ViewChild(\\"buttonRef\\") buttonRef!: ElementRef;
+  @ViewChild(\\"_root\\") _root!: ElementRef;
+
+  /**
+   * Passes \`aria-*\`, \`data-*\` & \`class\` attributes to correct child. Used in angular and stencil.
+   * @param element  the ref for the component
+   * @param customElementSelector  the custom element like \`my-component\`
+   */
+  private enableAttributePassing(
+    element: HTMLElement | null,
+    customElementSelector: string
+  ) {
+    const parent = element?.closest(customElementSelector);
+    if (element && parent) {
+      const attributes = parent.attributes;
+      for (let i = 0; i < attributes.length; i++) {
+        const attr = attributes.item(i);
+        if (
+          attr &&
+          (attr.name.startsWith(\\"data-\\") || attr.name.startsWith(\\"aria-\\"))
+        ) {
+          element.setAttribute(attr.name, attr.value);
+          parent.removeAttribute(attr.name);
+        }
+        if (attr && attr.name === \\"class\\") {
+          const isWebComponent = attr.value.includes(\\"hydrated\\");
+          const value = attr.value.replace(\\"hydrated\\", \\"\\").trim();
+          const currentClass = element.getAttribute(\\"class\\");
+          element.setAttribute(
+            attr.name,
+            \`\${currentClass ? \`\${currentClass} \` : \\"\\"}\${value}\`
+          );
+          if (isWebComponent) {
+            // Stencil is using this class for lazy loading component
+            parent.setAttribute(\\"class\\", \\"hydrated\\");
+          } else {
+            parent.removeAttribute(attr.name);
+          }
+        }
+      }
+    }
+  }
+
+  ngAfterViewInit() {
+    const element: HTMLElement | null = this._root?.nativeElement;
+    this.enableAttributePassing(
+      element,
+      \\"basic-ref-attribute-passing-component\\"
+    );
+  }
+}
+
+@NgModule({
+  declarations: [BasicRefAttributePassingComponent],
+  imports: [CommonModule],
+  exports: [BasicRefAttributePassingComponent],
+})
+export class BasicRefAttributePassingComponentModule {}
+"
+`;
+
+exports[`Angular > jsx > Typescript Test > basicRefAttributePassing 2`] = `
+"/**
+          useMetadata:
+          {\\"attributePassing\\":{\\"enabled\\":true}}
+          */
+
+import { Component, ViewChild, ElementRef } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+@Component({
+  selector: \\"basic-ref-attribute-passing-component\\",
+  template: \`
+    <button #buttonRef #_root>Attribute Passing</button>
+  \`,
+  styles: [
+    \`
+      :host {
+        display: contents;
+      }
+    \`,
+  ],
+  standalone: true,
+  imports: [CommonModule],
+})
+export default class BasicRefAttributePassingComponent {
+  @ViewChild(\\"buttonRef\\") buttonRef!: ElementRef;
+  @ViewChild(\\"_root\\") _root!: ElementRef;
+
+  /**
+   * Passes \`aria-*\`, \`data-*\` & \`class\` attributes to correct child. Used in angular and stencil.
+   * @param element  the ref for the component
+   * @param customElementSelector  the custom element like \`my-component\`
+   */
+  private enableAttributePassing(
+    element: HTMLElement | null,
+    customElementSelector: string
+  ) {
+    const parent = element?.closest(customElementSelector);
+    if (element && parent) {
+      const attributes = parent.attributes;
+      for (let i = 0; i < attributes.length; i++) {
+        const attr = attributes.item(i);
+        if (
+          attr &&
+          (attr.name.startsWith(\\"data-\\") || attr.name.startsWith(\\"aria-\\"))
+        ) {
+          element.setAttribute(attr.name, attr.value);
+          parent.removeAttribute(attr.name);
+        }
+        if (attr && attr.name === \\"class\\") {
+          const isWebComponent = attr.value.includes(\\"hydrated\\");
+          const value = attr.value.replace(\\"hydrated\\", \\"\\").trim();
+          const currentClass = element.getAttribute(\\"class\\");
+          element.setAttribute(
+            attr.name,
+            \`\${currentClass ? \`\${currentClass} \` : \\"\\"}\${value}\`
+          );
+          if (isWebComponent) {
+            // Stencil is using this class for lazy loading component
+            parent.setAttribute(\\"class\\", \\"hydrated\\");
+          } else {
+            parent.removeAttribute(attr.name);
+          }
+        }
+      }
+    }
+  }
+
+  ngAfterViewInit() {
+    const element: HTMLElement | null = this._root?.nativeElement;
+    this.enableAttributePassing(
+      element,
+      \\"basic-ref-attribute-passing-component\\"
+    );
+  }
+}
+"
+`;
+
+exports[`Angular > jsx > Typescript Test > basicRefAttributePassingCustomRef 1`] = `
+"/**
+          useMetadata:
+          {\\"attributePassing\\":{\\"enabled\\":true,\\"customRef\\":\\"buttonRef\\"}}
+          */
+
+import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component, ViewChild, ElementRef } from \\"@angular/core\\";
+
+@Component({
+  selector: \\"basic-ref-attribute-passing-custom-ref-component\\",
+  template: \`
+    <div><button #buttonRef>Attribute Passing</button></div>
+  \`,
+  styles: [
+    \`
+      :host {
+        display: contents;
+      }
+    \`,
+  ],
+})
+export default class BasicRefAttributePassingCustomRefComponent {
+  @ViewChild(\\"buttonRef\\") buttonRef!: ElementRef;
+
+  /**
+   * Passes \`aria-*\`, \`data-*\` & \`class\` attributes to correct child. Used in angular and stencil.
+   * @param element  the ref for the component
+   * @param customElementSelector  the custom element like \`my-component\`
+   */
+  private enableAttributePassing(
+    element: HTMLElement | null,
+    customElementSelector: string
+  ) {
+    const parent = element?.closest(customElementSelector);
+    if (element && parent) {
+      const attributes = parent.attributes;
+      for (let i = 0; i < attributes.length; i++) {
+        const attr = attributes.item(i);
+        if (
+          attr &&
+          (attr.name.startsWith(\\"data-\\") || attr.name.startsWith(\\"aria-\\"))
+        ) {
+          element.setAttribute(attr.name, attr.value);
+          parent.removeAttribute(attr.name);
+        }
+        if (attr && attr.name === \\"class\\") {
+          const isWebComponent = attr.value.includes(\\"hydrated\\");
+          const value = attr.value.replace(\\"hydrated\\", \\"\\").trim();
+          const currentClass = element.getAttribute(\\"class\\");
+          element.setAttribute(
+            attr.name,
+            \`\${currentClass ? \`\${currentClass} \` : \\"\\"}\${value}\`
+          );
+          if (isWebComponent) {
+            // Stencil is using this class for lazy loading component
+            parent.setAttribute(\\"class\\", \\"hydrated\\");
+          } else {
+            parent.removeAttribute(attr.name);
+          }
+        }
+      }
+    }
+  }
+
+  ngAfterViewInit() {
+    const element: HTMLElement | null = this.buttonRef?.nativeElement;
+    this.enableAttributePassing(
+      element,
+      \\"basic-ref-attribute-passing-custom-ref-component\\"
+    );
+  }
+}
+
+@NgModule({
+  declarations: [BasicRefAttributePassingCustomRefComponent],
+  imports: [CommonModule],
+  exports: [BasicRefAttributePassingCustomRefComponent],
+})
+export class BasicRefAttributePassingCustomRefComponentModule {}
+"
+`;
+
+exports[`Angular > jsx > Typescript Test > basicRefAttributePassingCustomRef 2`] = `
+"/**
+          useMetadata:
+          {\\"attributePassing\\":{\\"enabled\\":true,\\"customRef\\":\\"buttonRef\\"}}
+          */
+
+import { Component, ViewChild, ElementRef } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+@Component({
+  selector: \\"basic-ref-attribute-passing-custom-ref-component\\",
+  template: \`
+    <div><button #buttonRef>Attribute Passing</button></div>
+  \`,
+  styles: [
+    \`
+      :host {
+        display: contents;
+      }
+    \`,
+  ],
+  standalone: true,
+  imports: [CommonModule],
+})
+export default class BasicRefAttributePassingCustomRefComponent {
+  @ViewChild(\\"buttonRef\\") buttonRef!: ElementRef;
+
+  /**
+   * Passes \`aria-*\`, \`data-*\` & \`class\` attributes to correct child. Used in angular and stencil.
+   * @param element  the ref for the component
+   * @param customElementSelector  the custom element like \`my-component\`
+   */
+  private enableAttributePassing(
+    element: HTMLElement | null,
+    customElementSelector: string
+  ) {
+    const parent = element?.closest(customElementSelector);
+    if (element && parent) {
+      const attributes = parent.attributes;
+      for (let i = 0; i < attributes.length; i++) {
+        const attr = attributes.item(i);
+        if (
+          attr &&
+          (attr.name.startsWith(\\"data-\\") || attr.name.startsWith(\\"aria-\\"))
+        ) {
+          element.setAttribute(attr.name, attr.value);
+          parent.removeAttribute(attr.name);
+        }
+        if (attr && attr.name === \\"class\\") {
+          const isWebComponent = attr.value.includes(\\"hydrated\\");
+          const value = attr.value.replace(\\"hydrated\\", \\"\\").trim();
+          const currentClass = element.getAttribute(\\"class\\");
+          element.setAttribute(
+            attr.name,
+            \`\${currentClass ? \`\${currentClass} \` : \\"\\"}\${value}\`
+          );
+          if (isWebComponent) {
+            // Stencil is using this class for lazy loading component
+            parent.setAttribute(\\"class\\", \\"hydrated\\");
+          } else {
+            parent.removeAttribute(attr.name);
+          }
+        }
+      }
+    }
+  }
+
+  ngAfterViewInit() {
+    const element: HTMLElement | null = this.buttonRef?.nativeElement;
+    this.enableAttributePassing(
+      element,
+      \\"basic-ref-attribute-passing-custom-ref-component\\"
+    );
+  }
+}
+"
+`;
+
 exports[`Angular > jsx > Typescript Test > class + ClassName + css 1`] = `
 "import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
@@ -27960,6 +28610,9 @@ export default class StringLiteralStore {
 
 
 
+
+
+
 }
 
 @NgModule({
@@ -28023,6 +28676,9 @@ export default class StringLiteralStore {
 
 
 
+
+
+
 }"
 `;
 
diff --git a/packages/core/src/__tests__/__snapshots__/html.test.ts.snap b/packages/core/src/__tests__/__snapshots__/html.test.ts.snap
index 8d57f9a86c..05d5faf4d4 100644
--- a/packages/core/src/__tests__/__snapshots__/html.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/html.test.ts.snap
@@ -4272,6 +4272,27 @@ exports[`Html > jsx > Javascript Test > basicOnUpdateReturn 1`] = `
 "
 `;
 
+exports[`Html > jsx > Javascript Test > basicRefAttributePassing 1`] = `
+"/** useMetadata: {\\"attributePassing\\":{\\"enabled\\":true}} */
+
+<button data-el=\\"button-1\\" data-ref=\\"undefined-buttonRef\\">
+  Attribute Passing
+</button>
+"
+`;
+
+exports[`Html > jsx > Javascript Test > basicRefAttributePassingCustomRef 1`] = `
+"/** useMetadata: {\\"attributePassing\\":{\\"enabled\\":true,\\"customRef\\":\\"buttonRef\\"}}
+*/
+
+<div>
+  <button data-el=\\"button-1\\" data-ref=\\"undefined-buttonRef\\">
+    Attribute Passing
+  </button>
+</div>
+"
+`;
+
 exports[`Html > jsx > Javascript Test > class + ClassName + css 1`] = `
 "<div>
   <MyComp class=\\"test\\" className=\\"test2\\">
@@ -12117,6 +12138,27 @@ exports[`Html > jsx > Typescript Test > basicOnUpdateReturn 1`] = `
 "
 `;
 
+exports[`Html > jsx > Typescript Test > basicRefAttributePassing 1`] = `
+"/** useMetadata: {\\"attributePassing\\":{\\"enabled\\":true}} */
+
+<button data-el=\\"button-1\\" data-ref=\\"undefined-buttonRef\\">
+  Attribute Passing
+</button>
+"
+`;
+
+exports[`Html > jsx > Typescript Test > basicRefAttributePassingCustomRef 1`] = `
+"/** useMetadata: {\\"attributePassing\\":{\\"enabled\\":true,\\"customRef\\":\\"buttonRef\\"}}
+*/
+
+<div>
+  <button data-el=\\"button-1\\" data-ref=\\"undefined-buttonRef\\">
+    Attribute Passing
+  </button>
+</div>
+"
+`;
+
 exports[`Html > jsx > Typescript Test > class + ClassName + css 1`] = `
 "<div>
   <MyComp class=\\"test\\" className=\\"test2\\">
diff --git a/packages/core/src/__tests__/__snapshots__/liquid.test.ts.snap b/packages/core/src/__tests__/__snapshots__/liquid.test.ts.snap
index a34f841bd7..acb9a0504b 100644
--- a/packages/core/src/__tests__/__snapshots__/liquid.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/liquid.test.ts.snap
@@ -485,6 +485,21 @@ exports[`Liquid > jsx > Javascript Test > basicOnUpdateReturn 1`] = `
 "
 `;
 
+exports[`Liquid > jsx > Javascript Test > basicRefAttributePassing 1`] = `
+"/** useMetadata: {\\"attributePassing\\":{\\"enabled\\":true}} */
+
+<button>Attribute Passing</button>
+"
+`;
+
+exports[`Liquid > jsx > Javascript Test > basicRefAttributePassingCustomRef 1`] = `
+"/** useMetadata: {\\"attributePassing\\":{\\"enabled\\":true,\\"customRef\\":\\"buttonRef\\"}}
+*/
+
+<div><button>Attribute Passing</button></div>
+"
+`;
+
 exports[`Liquid > jsx > Javascript Test > class + ClassName + css 1`] = `
 "<div>
   <MyComp class=\\"test\\" className=\\"test2\\">
@@ -1499,6 +1514,21 @@ exports[`Liquid > jsx > Typescript Test > basicOnUpdateReturn 1`] = `
 "
 `;
 
+exports[`Liquid > jsx > Typescript Test > basicRefAttributePassing 1`] = `
+"/** useMetadata: {\\"attributePassing\\":{\\"enabled\\":true}} */
+
+<button>Attribute Passing</button>
+"
+`;
+
+exports[`Liquid > jsx > Typescript Test > basicRefAttributePassingCustomRef 1`] = `
+"/** useMetadata: {\\"attributePassing\\":{\\"enabled\\":true,\\"customRef\\":\\"buttonRef\\"}}
+*/
+
+<div><button>Attribute Passing</button></div>
+"
+`;
+
 exports[`Liquid > jsx > Typescript Test > class + ClassName + css 1`] = `
 "<div>
   <MyComp class=\\"test\\" className=\\"test2\\">
diff --git a/packages/core/src/__tests__/__snapshots__/lit.test.ts.snap b/packages/core/src/__tests__/__snapshots__/lit.test.ts.snap
index c7b341db53..0cc0ae50c1 100644
--- a/packages/core/src/__tests__/__snapshots__/lit.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/lit.test.ts.snap
@@ -2381,6 +2381,64 @@ export default class MyBasicOnUpdateReturnComponent extends LitElement {
 "
 `;
 
+exports[`Lit > jsx > Javascript Test > basicRefAttributePassing 1`] = `
+"/**
+          useMetadata:
+          {\\"attributePassing\\":{\\"enabled\\":true}}
+          */
+
+import { LitElement, html, css } from \\"lit\\";
+import { customElement, property, state, query } from \\"lit/decorators.js\\";
+
+@customElement(\\"basic-ref-attribute-passing-component\\")
+export default class BasicRefAttributePassingComponent extends LitElement {
+  createRenderRoot() {
+    return this;
+  }
+
+  @query('[ref=\\"buttonRef\\"]')
+  buttonRef!: HTMLElement;
+
+  render() {
+    return html\`
+
+          <button ref=\\"buttonRef\\">Attribute Passing</button>
+
+        \`;
+  }
+}
+"
+`;
+
+exports[`Lit > jsx > Javascript Test > basicRefAttributePassingCustomRef 1`] = `
+"/**
+          useMetadata:
+          {\\"attributePassing\\":{\\"enabled\\":true,\\"customRef\\":\\"buttonRef\\"}}
+          */
+
+import { LitElement, html, css } from \\"lit\\";
+import { customElement, property, state, query } from \\"lit/decorators.js\\";
+
+@customElement(\\"basic-ref-attribute-passing-custom-ref-component\\")
+export default class BasicRefAttributePassingCustomRefComponent extends LitElement {
+  createRenderRoot() {
+    return this;
+  }
+
+  @query('[ref=\\"buttonRef\\"]')
+  buttonRef!: HTMLElement;
+
+  render() {
+    return html\`
+
+          <div><button ref=\\"buttonRef\\">Attribute Passing</button></div>
+
+        \`;
+  }
+}
+"
+`;
+
 exports[`Lit > jsx > Javascript Test > class + ClassName + css 1`] = `
 "import \\"./my-component.ts\\";
 
@@ -7330,6 +7388,64 @@ export default class MyBasicOnUpdateReturnComponent extends LitElement {
 "
 `;
 
+exports[`Lit > jsx > Typescript Test > basicRefAttributePassing 1`] = `
+"/**
+          useMetadata:
+          {\\"attributePassing\\":{\\"enabled\\":true}}
+          */
+
+import { LitElement, html, css } from \\"lit\\";
+import { customElement, property, state, query } from \\"lit/decorators.js\\";
+
+@customElement(\\"basic-ref-attribute-passing-component\\")
+export default class BasicRefAttributePassingComponent extends LitElement {
+  createRenderRoot() {
+    return this;
+  }
+
+  @query('[ref=\\"buttonRef\\"]')
+  buttonRef!: HTMLElement;
+
+  render() {
+    return html\`
+
+          <button ref=\\"buttonRef\\">Attribute Passing</button>
+
+        \`;
+  }
+}
+"
+`;
+
+exports[`Lit > jsx > Typescript Test > basicRefAttributePassingCustomRef 1`] = `
+"/**
+          useMetadata:
+          {\\"attributePassing\\":{\\"enabled\\":true,\\"customRef\\":\\"buttonRef\\"}}
+          */
+
+import { LitElement, html, css } from \\"lit\\";
+import { customElement, property, state, query } from \\"lit/decorators.js\\";
+
+@customElement(\\"basic-ref-attribute-passing-custom-ref-component\\")
+export default class BasicRefAttributePassingCustomRefComponent extends LitElement {
+  createRenderRoot() {
+    return this;
+  }
+
+  @query('[ref=\\"buttonRef\\"]')
+  buttonRef!: HTMLElement;
+
+  render() {
+    return html\`
+
+          <div><button ref=\\"buttonRef\\">Attribute Passing</button></div>
+
+        \`;
+  }
+}
+"
+`;
+
 exports[`Lit > jsx > Typescript Test > class + ClassName + css 1`] = `
 "import \\"./my-component.ts\\";
 
diff --git a/packages/core/src/__tests__/__snapshots__/marko.test.ts.snap b/packages/core/src/__tests__/__snapshots__/marko.test.ts.snap
index 2a786b2d27..03983857c0 100644
--- a/packages/core/src/__tests__/__snapshots__/marko.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/marko.test.ts.snap
@@ -1591,6 +1591,38 @@ exports[`Marko > jsx > Javascript Test > basicOnUpdateReturn 1`] = `
 <div>Hello! \${state.name}</div>"
 `;
 
+exports[`Marko > jsx > Javascript Test > basicRefAttributePassing 1`] = `
+"
+          /**
+          useMetadata:
+          {\\"attributePassing\\":{\\"enabled\\":true}}
+          */
+          
+          class {
+  get buttonRef() {
+    return this.getEl(\\"buttonRef\\");
+  }
+}
+
+<button key=\\"buttonRef\\">Attribute Passing</button>"
+`;
+
+exports[`Marko > jsx > Javascript Test > basicRefAttributePassingCustomRef 1`] = `
+"
+          /**
+          useMetadata:
+          {\\"attributePassing\\":{\\"enabled\\":true,\\"customRef\\":\\"buttonRef\\"}}
+          */
+          
+          class {
+  get buttonRef() {
+    return this.getEl(\\"buttonRef\\");
+  }
+}
+
+<div><button key=\\"buttonRef\\">Attribute Passing</button></div>"
+`;
+
 exports[`Marko > jsx > Javascript Test > class + ClassName + css 1`] = `
 "import MyComp from \\"./my-component.marko\\";
 
@@ -4342,6 +4374,38 @@ exports[`Marko > jsx > Typescript Test > basicOnUpdateReturn 1`] = `
 <div>Hello! \${state.name}</div>"
 `;
 
+exports[`Marko > jsx > Typescript Test > basicRefAttributePassing 1`] = `
+"
+          /**
+          useMetadata:
+          {\\"attributePassing\\":{\\"enabled\\":true}}
+          */
+          
+          class {
+  get buttonRef() {
+    return this.getEl(\\"buttonRef\\");
+  }
+}
+
+<button key=\\"buttonRef\\">Attribute Passing</button>"
+`;
+
+exports[`Marko > jsx > Typescript Test > basicRefAttributePassingCustomRef 1`] = `
+"
+          /**
+          useMetadata:
+          {\\"attributePassing\\":{\\"enabled\\":true,\\"customRef\\":\\"buttonRef\\"}}
+          */
+          
+          class {
+  get buttonRef() {
+    return this.getEl(\\"buttonRef\\");
+  }
+}
+
+<div><button key=\\"buttonRef\\">Attribute Passing</button></div>"
+`;
+
 exports[`Marko > jsx > Typescript Test > class + ClassName + css 1`] = `
 "import MyComp from \\"./my-component.marko\\";
 
diff --git a/packages/core/src/__tests__/__snapshots__/mitosis.test.ts.snap b/packages/core/src/__tests__/__snapshots__/mitosis.test.ts.snap
index 8b2e56b818..4aa68280ec 100644
--- a/packages/core/src/__tests__/__snapshots__/mitosis.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/mitosis.test.ts.snap
@@ -1699,6 +1699,48 @@ export default function MyBasicOnUpdateReturnComponent(props) {
 "
 `;
 
+exports[`Mitosis, format: legacy (native loops and conditionals) > jsx > Javascript Test > basicRefAttributePassing 1`] = `
+"/**
+          useMetadata:
+          {\\"attributePassing\\":{\\"enabled\\":true}}
+          */
+
+import { useRef } from \\"@builder.io/mitosis\\";
+
+useMetadata({ attributePassing: { enabled: true } });
+
+export default function BasicRefAttributePassingComponent(props) {
+  const buttonRef = useRef(null);
+  const buttonRef = useRef(null);
+
+  return [<button ref={buttonRef}>Attribute Passing</button>];
+}
+"
+`;
+
+exports[`Mitosis, format: legacy (native loops and conditionals) > jsx > Javascript Test > basicRefAttributePassingCustomRef 1`] = `
+"/**
+          useMetadata:
+          {\\"attributePassing\\":{\\"enabled\\":true,\\"customRef\\":\\"buttonRef\\"}}
+          */
+
+import { useRef } from \\"@builder.io/mitosis\\";
+
+useMetadata({ attributePassing: { enabled: true, customRef: \\"buttonRef\\" } });
+
+export default function BasicRefAttributePassingCustomRefComponent(props) {
+  const buttonRef = useRef(null);
+  const buttonRef = useRef(null);
+
+  return [
+    <div>
+      <button ref={buttonRef}>Attribute Passing</button>
+    </div>,
+  ];
+}
+"
+`;
+
 exports[`Mitosis, format: legacy (native loops and conditionals) > jsx > Javascript Test > class + ClassName + css 1`] = `
 "import { MyComp } from \\"@components\\";
 
@@ -5072,6 +5114,48 @@ export default function MyBasicOnUpdateReturnComponent(props) {
 "
 `;
 
+exports[`Mitosis, format: legacy (native loops and conditionals) > jsx > Typescript Test > basicRefAttributePassing 1`] = `
+"/**
+          useMetadata:
+          {\\"attributePassing\\":{\\"enabled\\":true}}
+          */
+
+import { useRef } from \\"@builder.io/mitosis\\";
+
+useMetadata({ attributePassing: { enabled: true } });
+
+export default function BasicRefAttributePassingComponent(props) {
+  const buttonRef = useRef<HTMLButtonElement | null>(null);
+  const buttonRef = useRef<HTMLButtonElement | null>(null);
+
+  return [<button ref={buttonRef}>Attribute Passing</button>];
+}
+"
+`;
+
+exports[`Mitosis, format: legacy (native loops and conditionals) > jsx > Typescript Test > basicRefAttributePassingCustomRef 1`] = `
+"/**
+          useMetadata:
+          {\\"attributePassing\\":{\\"enabled\\":true,\\"customRef\\":\\"buttonRef\\"}}
+          */
+
+import { useRef } from \\"@builder.io/mitosis\\";
+
+useMetadata({ attributePassing: { enabled: true, customRef: \\"buttonRef\\" } });
+
+export default function BasicRefAttributePassingCustomRefComponent(props) {
+  const buttonRef = useRef<HTMLButtonElement | null>(null);
+  const buttonRef = useRef<HTMLButtonElement | null>(null);
+
+  return [
+    <div>
+      <button ref={buttonRef}>Attribute Passing</button>
+    </div>,
+  ];
+}
+"
+`;
+
 exports[`Mitosis, format: legacy (native loops and conditionals) > jsx > Typescript Test > class + ClassName + css 1`] = `
 "import { MyComp } from \\"@components\\";
 
@@ -9056,6 +9140,48 @@ export default function MyBasicOnUpdateReturnComponent(props) {
 "
 `;
 
+exports[`Mitosis, format: legacy > jsx > Javascript Test > basicRefAttributePassing 1`] = `
+"/**
+          useMetadata:
+          {\\"attributePassing\\":{\\"enabled\\":true}}
+          */
+
+import { useRef } from \\"@builder.io/mitosis\\";
+
+useMetadata({ attributePassing: { enabled: true } });
+
+export default function BasicRefAttributePassingComponent(props) {
+  const buttonRef = useRef(null);
+  const buttonRef = useRef(null);
+
+  return <button ref={buttonRef}>Attribute Passing</button>;
+}
+"
+`;
+
+exports[`Mitosis, format: legacy > jsx > Javascript Test > basicRefAttributePassingCustomRef 1`] = `
+"/**
+          useMetadata:
+          {\\"attributePassing\\":{\\"enabled\\":true,\\"customRef\\":\\"buttonRef\\"}}
+          */
+
+import { useRef } from \\"@builder.io/mitosis\\";
+
+useMetadata({ attributePassing: { enabled: true, customRef: \\"buttonRef\\" } });
+
+export default function BasicRefAttributePassingCustomRefComponent(props) {
+  const buttonRef = useRef(null);
+  const buttonRef = useRef(null);
+
+  return (
+    <div>
+      <button ref={buttonRef}>Attribute Passing</button>
+    </div>
+  );
+}
+"
+`;
+
 exports[`Mitosis, format: legacy > jsx > Javascript Test > class + ClassName + css 1`] = `
 "import { MyComp } from \\"@components\\";
 
@@ -12490,6 +12616,48 @@ export default function MyBasicOnUpdateReturnComponent(props) {
 "
 `;
 
+exports[`Mitosis, format: legacy > jsx > Typescript Test > basicRefAttributePassing 1`] = `
+"/**
+          useMetadata:
+          {\\"attributePassing\\":{\\"enabled\\":true}}
+          */
+
+import { useRef } from \\"@builder.io/mitosis\\";
+
+useMetadata({ attributePassing: { enabled: true } });
+
+export default function BasicRefAttributePassingComponent(props) {
+  const buttonRef = useRef<HTMLButtonElement | null>(null);
+  const buttonRef = useRef<HTMLButtonElement | null>(null);
+
+  return <button ref={buttonRef}>Attribute Passing</button>;
+}
+"
+`;
+
+exports[`Mitosis, format: legacy > jsx > Typescript Test > basicRefAttributePassingCustomRef 1`] = `
+"/**
+          useMetadata:
+          {\\"attributePassing\\":{\\"enabled\\":true,\\"customRef\\":\\"buttonRef\\"}}
+          */
+
+import { useRef } from \\"@builder.io/mitosis\\";
+
+useMetadata({ attributePassing: { enabled: true, customRef: \\"buttonRef\\" } });
+
+export default function BasicRefAttributePassingCustomRefComponent(props) {
+  const buttonRef = useRef<HTMLButtonElement | null>(null);
+  const buttonRef = useRef<HTMLButtonElement | null>(null);
+
+  return (
+    <div>
+      <button ref={buttonRef}>Attribute Passing</button>
+    </div>
+  );
+}
+"
+`;
+
 exports[`Mitosis, format: legacy > jsx > Typescript Test > class + ClassName + css 1`] = `
 "import { MyComp } from \\"@components\\";
 
@@ -16711,6 +16879,40 @@ export default MyBasicOnUpdateReturnComponent;
 "
 `;
 
+exports[`Mitosis, format: react > jsx > Javascript Test > basicRefAttributePassing 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useRef } from \\"react\\";
+
+function BasicRefAttributePassingComponent(props) {
+  const buttonRef = useRef(null);
+
+  return <button ref={buttonRef}>Attribute Passing</button>;
+}
+
+export default BasicRefAttributePassingComponent;
+"
+`;
+
+exports[`Mitosis, format: react > jsx > Javascript Test > basicRefAttributePassingCustomRef 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useRef } from \\"react\\";
+
+function BasicRefAttributePassingCustomRefComponent(props) {
+  const buttonRef = useRef(null);
+
+  return (
+    <div>
+      <button ref={buttonRef}>Attribute Passing</button>
+    </div>
+  );
+}
+
+export default BasicRefAttributePassingCustomRefComponent;
+"
+`;
+
 exports[`Mitosis, format: react > jsx > Javascript Test > class + ClassName + css 1`] = `
 "import * as React from \\"react\\";
 import MyComp from \\"./my-component\\";
@@ -20426,6 +20628,40 @@ export default MyBasicOnUpdateReturnComponent;
 "
 `;
 
+exports[`Mitosis, format: react > jsx > Typescript Test > basicRefAttributePassing 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useRef } from \\"react\\";
+
+function BasicRefAttributePassingComponent(props) {
+  const buttonRef = useRef(null);
+
+  return <button ref={buttonRef}>Attribute Passing</button>;
+}
+
+export default BasicRefAttributePassingComponent;
+"
+`;
+
+exports[`Mitosis, format: react > jsx > Typescript Test > basicRefAttributePassingCustomRef 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useRef } from \\"react\\";
+
+function BasicRefAttributePassingCustomRefComponent(props) {
+  const buttonRef = useRef(null);
+
+  return (
+    <div>
+      <button ref={buttonRef}>Attribute Passing</button>
+    </div>
+  );
+}
+
+export default BasicRefAttributePassingCustomRefComponent;
+"
+`;
+
 exports[`Mitosis, format: react > jsx > Typescript Test > class + ClassName + css 1`] = `
 "import * as React from \\"react\\";
 import MyComp from \\"./my-component\\";
diff --git a/packages/core/src/__tests__/__snapshots__/parse-jsx.test.ts.snap b/packages/core/src/__tests__/__snapshots__/parse-jsx.test.ts.snap
index 57e1f1b0a7..c95b662b0e 100644
--- a/packages/core/src/__tests__/__snapshots__/parse-jsx.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/parse-jsx.test.ts.snap
@@ -6483,6 +6483,139 @@ return () => {
 }
 `;
 
+exports[`Parse JSX > Javascript > basicRefAttributePassing 1`] = `
+{
+  "@type": "@builder.io/mitosis/component",
+  "children": [
+    {
+      "@type": "@builder.io/mitosis/node",
+      "bindings": {
+        "ref": {
+          "bindingType": "expression",
+          "code": "buttonRef",
+          "type": "single",
+        },
+      },
+      "children": [
+        {
+          "@type": "@builder.io/mitosis/node",
+          "bindings": {},
+          "children": [],
+          "meta": {},
+          "name": "div",
+          "properties": {
+            "_text": "Attribute Passing",
+          },
+          "scope": {},
+        },
+      ],
+      "meta": {},
+      "name": "button",
+      "properties": {},
+      "scope": {},
+    },
+  ],
+  "context": {
+    "get": {},
+    "set": {},
+  },
+  "exports": {},
+  "hooks": {
+    "onEvent": [],
+    "onMount": [],
+  },
+  "imports": [],
+  "inputs": [],
+  "meta": {
+    "useMetadata": {
+      "attributePassing": {
+        "enabled": true,
+      },
+    },
+  },
+  "name": "BasicRefAttributePassingComponent",
+  "refs": {
+    "buttonRef": {
+      "argument": "null",
+    },
+  },
+  "state": {},
+  "subComponents": [],
+}
+`;
+
+exports[`Parse JSX > Javascript > basicRefAttributePassingCustomRef 1`] = `
+{
+  "@type": "@builder.io/mitosis/component",
+  "children": [
+    {
+      "@type": "@builder.io/mitosis/node",
+      "bindings": {},
+      "children": [
+        {
+          "@type": "@builder.io/mitosis/node",
+          "bindings": {
+            "ref": {
+              "bindingType": "expression",
+              "code": "buttonRef",
+              "type": "single",
+            },
+          },
+          "children": [
+            {
+              "@type": "@builder.io/mitosis/node",
+              "bindings": {},
+              "children": [],
+              "meta": {},
+              "name": "div",
+              "properties": {
+                "_text": "Attribute Passing",
+              },
+              "scope": {},
+            },
+          ],
+          "meta": {},
+          "name": "button",
+          "properties": {},
+          "scope": {},
+        },
+      ],
+      "meta": {},
+      "name": "div",
+      "properties": {},
+      "scope": {},
+    },
+  ],
+  "context": {
+    "get": {},
+    "set": {},
+  },
+  "exports": {},
+  "hooks": {
+    "onEvent": [],
+    "onMount": [],
+  },
+  "imports": [],
+  "inputs": [],
+  "meta": {
+    "useMetadata": {
+      "attributePassing": {
+        "customRef": "buttonRef",
+        "enabled": true,
+      },
+    },
+  },
+  "name": "BasicRefAttributePassingCustomRefComponent",
+  "refs": {
+    "buttonRef": {
+      "argument": "null",
+    },
+  },
+  "state": {},
+  "subComponents": [],
+}
+`;
+
 exports[`Parse JSX > Javascript > class + ClassName + css 1`] = `
 {
   "@type": "@builder.io/mitosis/component",
@@ -19819,6 +19952,141 @@ return () => {
 }
 `;
 
+exports[`Parse JSX > Typescript > basicRefAttributePassing 1`] = `
+{
+  "@type": "@builder.io/mitosis/component",
+  "children": [
+    {
+      "@type": "@builder.io/mitosis/node",
+      "bindings": {
+        "ref": {
+          "bindingType": "expression",
+          "code": "buttonRef",
+          "type": "single",
+        },
+      },
+      "children": [
+        {
+          "@type": "@builder.io/mitosis/node",
+          "bindings": {},
+          "children": [],
+          "meta": {},
+          "name": "div",
+          "properties": {
+            "_text": "Attribute Passing",
+          },
+          "scope": {},
+        },
+      ],
+      "meta": {},
+      "name": "button",
+      "properties": {},
+      "scope": {},
+    },
+  ],
+  "context": {
+    "get": {},
+    "set": {},
+  },
+  "exports": {},
+  "hooks": {
+    "onEvent": [],
+    "onMount": [],
+  },
+  "imports": [],
+  "inputs": [],
+  "meta": {
+    "useMetadata": {
+      "attributePassing": {
+        "enabled": true,
+      },
+    },
+  },
+  "name": "BasicRefAttributePassingComponent",
+  "refs": {
+    "buttonRef": {
+      "argument": "null",
+      "typeParameter": "HTMLButtonElement | null",
+    },
+  },
+  "state": {},
+  "subComponents": [],
+}
+`;
+
+exports[`Parse JSX > Typescript > basicRefAttributePassingCustomRef 1`] = `
+{
+  "@type": "@builder.io/mitosis/component",
+  "children": [
+    {
+      "@type": "@builder.io/mitosis/node",
+      "bindings": {},
+      "children": [
+        {
+          "@type": "@builder.io/mitosis/node",
+          "bindings": {
+            "ref": {
+              "bindingType": "expression",
+              "code": "buttonRef",
+              "type": "single",
+            },
+          },
+          "children": [
+            {
+              "@type": "@builder.io/mitosis/node",
+              "bindings": {},
+              "children": [],
+              "meta": {},
+              "name": "div",
+              "properties": {
+                "_text": "Attribute Passing",
+              },
+              "scope": {},
+            },
+          ],
+          "meta": {},
+          "name": "button",
+          "properties": {},
+          "scope": {},
+        },
+      ],
+      "meta": {},
+      "name": "div",
+      "properties": {},
+      "scope": {},
+    },
+  ],
+  "context": {
+    "get": {},
+    "set": {},
+  },
+  "exports": {},
+  "hooks": {
+    "onEvent": [],
+    "onMount": [],
+  },
+  "imports": [],
+  "inputs": [],
+  "meta": {
+    "useMetadata": {
+      "attributePassing": {
+        "customRef": "buttonRef",
+        "enabled": true,
+      },
+    },
+  },
+  "name": "BasicRefAttributePassingCustomRefComponent",
+  "refs": {
+    "buttonRef": {
+      "argument": "null",
+      "typeParameter": "HTMLButtonElement | null",
+    },
+  },
+  "state": {},
+  "subComponents": [],
+}
+`;
+
 exports[`Parse JSX > Typescript > class + ClassName + css 1`] = `
 {
   "@type": "@builder.io/mitosis/component",
diff --git a/packages/core/src/__tests__/__snapshots__/preact.test.ts.snap b/packages/core/src/__tests__/__snapshots__/preact.test.ts.snap
index 3e5fc770be..2f2329165b 100644
--- a/packages/core/src/__tests__/__snapshots__/preact.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/preact.test.ts.snap
@@ -1861,6 +1861,50 @@ export default MyBasicOnUpdateReturnComponent;
 "
 `;
 
+exports[`Preact > jsx > Javascript Test > basicRefAttributePassing 1`] = `
+"/**
+          useMetadata:
+          {\\"attributePassing\\":{\\"enabled\\":true}}
+          */
+
+/** @jsx h */
+import { h, Fragment } from \\"preact\\";
+import { useRef } from \\"preact/hooks\\";
+
+function BasicRefAttributePassingComponent(props) {
+  const buttonRef = useRef(null);
+
+  return <button ref={buttonRef}>Attribute Passing</button>;
+}
+
+export default BasicRefAttributePassingComponent;
+"
+`;
+
+exports[`Preact > jsx > Javascript Test > basicRefAttributePassingCustomRef 1`] = `
+"/**
+          useMetadata:
+          {\\"attributePassing\\":{\\"enabled\\":true,\\"customRef\\":\\"buttonRef\\"}}
+          */
+
+/** @jsx h */
+import { h, Fragment } from \\"preact\\";
+import { useRef } from \\"preact/hooks\\";
+
+function BasicRefAttributePassingCustomRefComponent(props) {
+  const buttonRef = useRef(null);
+
+  return (
+    <div>
+      <button ref={buttonRef}>Attribute Passing</button>
+    </div>
+  );
+}
+
+export default BasicRefAttributePassingCustomRefComponent;
+"
+`;
+
 exports[`Preact > jsx > Javascript Test > class + ClassName + css 1`] = `
 "/** @jsx h */
 import { h, Fragment } from \\"preact\\";
@@ -5893,6 +5937,50 @@ export default MyBasicOnUpdateReturnComponent;
 "
 `;
 
+exports[`Preact > jsx > Typescript Test > basicRefAttributePassing 1`] = `
+"/**
+          useMetadata:
+          {\\"attributePassing\\":{\\"enabled\\":true}}
+          */
+
+/** @jsx h */
+import { h, Fragment } from \\"preact\\";
+import { useRef } from \\"preact/hooks\\";
+
+function BasicRefAttributePassingComponent(props: any) {
+  const buttonRef = useRef<HTMLButtonElement | null>(null);
+
+  return <button ref={buttonRef}>Attribute Passing</button>;
+}
+
+export default BasicRefAttributePassingComponent;
+"
+`;
+
+exports[`Preact > jsx > Typescript Test > basicRefAttributePassingCustomRef 1`] = `
+"/**
+          useMetadata:
+          {\\"attributePassing\\":{\\"enabled\\":true,\\"customRef\\":\\"buttonRef\\"}}
+          */
+
+/** @jsx h */
+import { h, Fragment } from \\"preact\\";
+import { useRef } from \\"preact/hooks\\";
+
+function BasicRefAttributePassingCustomRefComponent(props: any) {
+  const buttonRef = useRef<HTMLButtonElement | null>(null);
+
+  return (
+    <div>
+      <button ref={buttonRef}>Attribute Passing</button>
+    </div>
+  );
+}
+
+export default BasicRefAttributePassingCustomRefComponent;
+"
+`;
+
 exports[`Preact > jsx > Typescript Test > class + ClassName + css 1`] = `
 "/** @jsx h */
 import { h, Fragment } from \\"preact\\";
diff --git a/packages/core/src/__tests__/__snapshots__/qwik.test.ts.snap b/packages/core/src/__tests__/__snapshots__/qwik.test.ts.snap
index 4d49a89339..fae5404a38 100644
--- a/packages/core/src/__tests__/__snapshots__/qwik.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/qwik.test.ts.snap
@@ -3748,6 +3748,50 @@ export const STYLES = \`
 "
 `;
 
+exports[`qwik > jsx > Javascript Test > basicRefAttributePassing 1`] = `
+"
+          /**
+          useMetadata:
+          {\\"attributePassing\\":{\\"enabled\\":true}}
+          */
+          
+          import { Fragment, component$, h, useSignal } from \\"@builder.io/qwik\\";
+
+export const BasicRefAttributePassingComponent = component$((props) => {
+  const buttonRef = useSignal();
+
+  return <button ref={buttonRef}>Attribute Passing</button>;
+});
+
+export default BasicRefAttributePassingComponent;
+"
+`;
+
+exports[`qwik > jsx > Javascript Test > basicRefAttributePassingCustomRef 1`] = `
+"
+          /**
+          useMetadata:
+          {\\"attributePassing\\":{\\"enabled\\":true,\\"customRef\\":\\"buttonRef\\"}}
+          */
+          
+          import { Fragment, component$, h, useSignal } from \\"@builder.io/qwik\\";
+
+export const BasicRefAttributePassingCustomRefComponent = component$(
+  (props) => {
+    const buttonRef = useSignal();
+
+    return (
+      <div>
+        <button ref={buttonRef}>Attribute Passing</button>
+      </div>
+    );
+  }
+);
+
+export default BasicRefAttributePassingCustomRefComponent;
+"
+`;
+
 exports[`qwik > jsx > Javascript Test > class + ClassName + css 1`] = `
 "import MyComp from \\"./my-component.jsx\\";
 
@@ -7720,6 +7764,50 @@ export const STYLES = \`
 "
 `;
 
+exports[`qwik > jsx > Typescript Test > basicRefAttributePassing 1`] = `
+"
+          /**
+          useMetadata:
+          {\\"attributePassing\\":{\\"enabled\\":true}}
+          */
+          
+          import { Fragment, component$, h, useSignal } from \\"@builder.io/qwik\\";
+
+export const BasicRefAttributePassingComponent = component$((props: any) => {
+  const buttonRef = useSignal<Element>();
+
+  return <button ref={buttonRef}>Attribute Passing</button>;
+});
+
+export default BasicRefAttributePassingComponent;
+"
+`;
+
+exports[`qwik > jsx > Typescript Test > basicRefAttributePassingCustomRef 1`] = `
+"
+          /**
+          useMetadata:
+          {\\"attributePassing\\":{\\"enabled\\":true,\\"customRef\\":\\"buttonRef\\"}}
+          */
+          
+          import { Fragment, component$, h, useSignal } from \\"@builder.io/qwik\\";
+
+export const BasicRefAttributePassingCustomRefComponent = component$(
+  (props: any) => {
+    const buttonRef = useSignal<Element>();
+
+    return (
+      <div>
+        <button ref={buttonRef}>Attribute Passing</button>
+      </div>
+    );
+  }
+);
+
+export default BasicRefAttributePassingCustomRefComponent;
+"
+`;
+
 exports[`qwik > jsx > Typescript Test > class + ClassName + css 1`] = `
 "import MyComp from \\"./my-component.jsx\\";
 
diff --git a/packages/core/src/__tests__/__snapshots__/react-native.test.ts.snap b/packages/core/src/__tests__/__snapshots__/react-native.test.ts.snap
index 7cd91475be..a6a8acbaea 100644
--- a/packages/core/src/__tests__/__snapshots__/react-native.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/react-native.test.ts.snap
@@ -2488,6 +2488,80 @@ export default MyBasicOnUpdateReturnComponent;
 "
 `;
 
+exports[`React Native > jsx > Javascript Test > basicRefAttributePassing 1`] = `
+"/**
+          useMetadata:
+          {\\"attributePassing\\":{\\"enabled\\":true}}
+          */
+
+import * as React from \\"react\\";
+import {
+  FlatList,
+  ScrollView,
+  View,
+  StyleSheet,
+  Image,
+  Text,
+  Pressable,
+  TextInput,
+  TouchableOpacity,
+  Button,
+  Linking,
+} from \\"react-native\\";
+import { useRef } from \\"react\\";
+
+function BasicRefAttributePassingComponent(props) {
+  const buttonRef = useRef(null);
+
+  return (
+    <Button ref={buttonRef}>
+      <Text>Attribute Passing</Text>
+    </Button>
+  );
+}
+
+export default BasicRefAttributePassingComponent;
+"
+`;
+
+exports[`React Native > jsx > Javascript Test > basicRefAttributePassingCustomRef 1`] = `
+"/**
+          useMetadata:
+          {\\"attributePassing\\":{\\"enabled\\":true,\\"customRef\\":\\"buttonRef\\"}}
+          */
+
+import * as React from \\"react\\";
+import {
+  FlatList,
+  ScrollView,
+  View,
+  StyleSheet,
+  Image,
+  Text,
+  Pressable,
+  TextInput,
+  TouchableOpacity,
+  Button,
+  Linking,
+} from \\"react-native\\";
+import { useRef } from \\"react\\";
+
+function BasicRefAttributePassingCustomRefComponent(props) {
+  const buttonRef = useRef(null);
+
+  return (
+    <View>
+      <Button ref={buttonRef}>
+        <Text>Attribute Passing</Text>
+      </Button>
+    </View>
+  );
+}
+
+export default BasicRefAttributePassingCustomRefComponent;
+"
+`;
+
 exports[`React Native > jsx > Javascript Test > class + ClassName + css 1`] = `
 "import * as React from \\"react\\";
 import {
@@ -8053,6 +8127,80 @@ export default MyBasicOnUpdateReturnComponent;
 "
 `;
 
+exports[`React Native > jsx > Typescript Test > basicRefAttributePassing 1`] = `
+"/**
+          useMetadata:
+          {\\"attributePassing\\":{\\"enabled\\":true}}
+          */
+
+import * as React from \\"react\\";
+import {
+  FlatList,
+  ScrollView,
+  View,
+  StyleSheet,
+  Image,
+  Text,
+  Pressable,
+  TextInput,
+  TouchableOpacity,
+  Button,
+  Linking,
+} from \\"react-native\\";
+import { useRef } from \\"react\\";
+
+function BasicRefAttributePassingComponent(props: any) {
+  const buttonRef = useRef<HTMLButtonElement | null>(null);
+
+  return (
+    <Button ref={buttonRef}>
+      <Text>Attribute Passing</Text>
+    </Button>
+  );
+}
+
+export default BasicRefAttributePassingComponent;
+"
+`;
+
+exports[`React Native > jsx > Typescript Test > basicRefAttributePassingCustomRef 1`] = `
+"/**
+          useMetadata:
+          {\\"attributePassing\\":{\\"enabled\\":true,\\"customRef\\":\\"buttonRef\\"}}
+          */
+
+import * as React from \\"react\\";
+import {
+  FlatList,
+  ScrollView,
+  View,
+  StyleSheet,
+  Image,
+  Text,
+  Pressable,
+  TextInput,
+  TouchableOpacity,
+  Button,
+  Linking,
+} from \\"react-native\\";
+import { useRef } from \\"react\\";
+
+function BasicRefAttributePassingCustomRefComponent(props: any) {
+  const buttonRef = useRef<HTMLButtonElement | null>(null);
+
+  return (
+    <View>
+      <Button ref={buttonRef}>
+        <Text>Attribute Passing</Text>
+      </Button>
+    </View>
+  );
+}
+
+export default BasicRefAttributePassingCustomRefComponent;
+"
+`;
+
 exports[`React Native > jsx > Typescript Test > class + ClassName + css 1`] = `
 "import * as React from \\"react\\";
 import {
diff --git a/packages/core/src/__tests__/__snapshots__/react-state-builder.test.ts.snap b/packages/core/src/__tests__/__snapshots__/react-state-builder.test.ts.snap
index bbea432570..aaaf6a6af0 100644
--- a/packages/core/src/__tests__/__snapshots__/react-state-builder.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/react-state-builder.test.ts.snap
@@ -1871,6 +1871,52 @@ export default MyBasicOnUpdateReturnComponent;
 "
 `;
 
+exports[`React - stateType: builder > jsx > Javascript Test > basicRefAttributePassing 1`] = `
+"/**
+          useMetadata:
+          {\\"attributePassing\\":{\\"enabled\\":true}}
+          */
+
+\\"use client\\";
+import * as React from \\"react\\";
+import { useRef } from \\"react\\";
+
+function BasicRefAttributePassingComponent(props) {
+  const buttonRef = useRef(null);
+  const state = useBuilderState({});
+
+  return <button ref={buttonRef}>Attribute Passing</button>;
+}
+
+export default BasicRefAttributePassingComponent;
+"
+`;
+
+exports[`React - stateType: builder > jsx > Javascript Test > basicRefAttributePassingCustomRef 1`] = `
+"/**
+          useMetadata:
+          {\\"attributePassing\\":{\\"enabled\\":true,\\"customRef\\":\\"buttonRef\\"}}
+          */
+
+\\"use client\\";
+import * as React from \\"react\\";
+import { useRef } from \\"react\\";
+
+function BasicRefAttributePassingCustomRefComponent(props) {
+  const buttonRef = useRef(null);
+  const state = useBuilderState({});
+
+  return (
+    <div>
+      <button ref={buttonRef}>Attribute Passing</button>
+    </div>
+  );
+}
+
+export default BasicRefAttributePassingCustomRefComponent;
+"
+`;
+
 exports[`React - stateType: builder > jsx > Javascript Test > class + ClassName + css 1`] = `
 "import * as React from \\"react\\";
 import MyComp from \\"./my-component\\";
@@ -5886,6 +5932,52 @@ export default MyBasicOnUpdateReturnComponent;
 "
 `;
 
+exports[`React - stateType: builder > jsx > Typescript Test > basicRefAttributePassing 1`] = `
+"/**
+          useMetadata:
+          {\\"attributePassing\\":{\\"enabled\\":true}}
+          */
+
+\\"use client\\";
+import * as React from \\"react\\";
+import { useRef } from \\"react\\";
+
+function BasicRefAttributePassingComponent(props: any) {
+  const buttonRef = useRef<HTMLButtonElement | null>(null);
+  const state = useBuilderState({});
+
+  return <button ref={buttonRef}>Attribute Passing</button>;
+}
+
+export default BasicRefAttributePassingComponent;
+"
+`;
+
+exports[`React - stateType: builder > jsx > Typescript Test > basicRefAttributePassingCustomRef 1`] = `
+"/**
+          useMetadata:
+          {\\"attributePassing\\":{\\"enabled\\":true,\\"customRef\\":\\"buttonRef\\"}}
+          */
+
+\\"use client\\";
+import * as React from \\"react\\";
+import { useRef } from \\"react\\";
+
+function BasicRefAttributePassingCustomRefComponent(props: any) {
+  const buttonRef = useRef<HTMLButtonElement | null>(null);
+  const state = useBuilderState({});
+
+  return (
+    <div>
+      <button ref={buttonRef}>Attribute Passing</button>
+    </div>
+  );
+}
+
+export default BasicRefAttributePassingCustomRefComponent;
+"
+`;
+
 exports[`React - stateType: builder > jsx > Typescript Test > class + ClassName + css 1`] = `
 "import * as React from \\"react\\";
 import MyComp from \\"./my-component\\";
diff --git a/packages/core/src/__tests__/__snapshots__/react-state-mobx.test.ts.snap b/packages/core/src/__tests__/__snapshots__/react-state-mobx.test.ts.snap
index e7ddbc2ad6..5505482da5 100644
--- a/packages/core/src/__tests__/__snapshots__/react-state-mobx.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/react-state-mobx.test.ts.snap
@@ -1927,6 +1927,56 @@ export default observedMyBasicOnUpdateReturnComponent;
 "
 `;
 
+exports[`React - stateType: mobx > jsx > Javascript Test > basicRefAttributePassing 1`] = `
+"/**
+          useMetadata:
+          {\\"attributePassing\\":{\\"enabled\\":true}}
+          */
+
+\\"use client\\";
+import * as React from \\"react\\";
+import { useRef } from \\"react\\";
+
+function BasicRefAttributePassingComponent(props) {
+  const buttonRef = useRef(null);
+
+  return <button ref={buttonRef}>Attribute Passing</button>;
+}
+
+const observedBasicRefAttributePassingComponent = observer(
+  BasicRefAttributePassingComponent
+);
+export default observedBasicRefAttributePassingComponent;
+"
+`;
+
+exports[`React - stateType: mobx > jsx > Javascript Test > basicRefAttributePassingCustomRef 1`] = `
+"/**
+          useMetadata:
+          {\\"attributePassing\\":{\\"enabled\\":true,\\"customRef\\":\\"buttonRef\\"}}
+          */
+
+\\"use client\\";
+import * as React from \\"react\\";
+import { useRef } from \\"react\\";
+
+function BasicRefAttributePassingCustomRefComponent(props) {
+  const buttonRef = useRef(null);
+
+  return (
+    <div>
+      <button ref={buttonRef}>Attribute Passing</button>
+    </div>
+  );
+}
+
+const observedBasicRefAttributePassingCustomRefComponent = observer(
+  BasicRefAttributePassingCustomRefComponent
+);
+export default observedBasicRefAttributePassingCustomRefComponent;
+"
+`;
+
 exports[`React - stateType: mobx > jsx > Javascript Test > class + ClassName + css 1`] = `
 "import * as React from \\"react\\";
 import MyComp from \\"./my-component\\";
@@ -5977,6 +6027,56 @@ export default observedMyBasicOnUpdateReturnComponent;
 "
 `;
 
+exports[`React - stateType: mobx > jsx > Typescript Test > basicRefAttributePassing 1`] = `
+"/**
+          useMetadata:
+          {\\"attributePassing\\":{\\"enabled\\":true}}
+          */
+
+\\"use client\\";
+import * as React from \\"react\\";
+import { useRef } from \\"react\\";
+
+function BasicRefAttributePassingComponent(props: any) {
+  const buttonRef = useRef<HTMLButtonElement | null>(null);
+
+  return <button ref={buttonRef}>Attribute Passing</button>;
+}
+
+const observedBasicRefAttributePassingComponent = observer(
+  BasicRefAttributePassingComponent
+);
+export default observedBasicRefAttributePassingComponent;
+"
+`;
+
+exports[`React - stateType: mobx > jsx > Typescript Test > basicRefAttributePassingCustomRef 1`] = `
+"/**
+          useMetadata:
+          {\\"attributePassing\\":{\\"enabled\\":true,\\"customRef\\":\\"buttonRef\\"}}
+          */
+
+\\"use client\\";
+import * as React from \\"react\\";
+import { useRef } from \\"react\\";
+
+function BasicRefAttributePassingCustomRefComponent(props: any) {
+  const buttonRef = useRef<HTMLButtonElement | null>(null);
+
+  return (
+    <div>
+      <button ref={buttonRef}>Attribute Passing</button>
+    </div>
+  );
+}
+
+const observedBasicRefAttributePassingCustomRefComponent = observer(
+  BasicRefAttributePassingCustomRefComponent
+);
+export default observedBasicRefAttributePassingCustomRefComponent;
+"
+`;
+
 exports[`React - stateType: mobx > jsx > Typescript Test > class + ClassName + css 1`] = `
 "import * as React from \\"react\\";
 import MyComp from \\"./my-component\\";
diff --git a/packages/core/src/__tests__/__snapshots__/react-state-solid.test.ts.snap b/packages/core/src/__tests__/__snapshots__/react-state-solid.test.ts.snap
index c183b05b58..d248447f0b 100644
--- a/packages/core/src/__tests__/__snapshots__/react-state-solid.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/react-state-solid.test.ts.snap
@@ -1868,6 +1868,50 @@ export default MyBasicOnUpdateReturnComponent;
 "
 `;
 
+exports[`React - stateType: solid > jsx > Javascript Test > basicRefAttributePassing 1`] = `
+"/**
+          useMetadata:
+          {\\"attributePassing\\":{\\"enabled\\":true}}
+          */
+
+\\"use client\\";
+import * as React from \\"react\\";
+import { useRef } from \\"react\\";
+
+function BasicRefAttributePassingComponent(props) {
+  const buttonRef = useRef(null);
+
+  return <button ref={buttonRef}>Attribute Passing</button>;
+}
+
+export default BasicRefAttributePassingComponent;
+"
+`;
+
+exports[`React - stateType: solid > jsx > Javascript Test > basicRefAttributePassingCustomRef 1`] = `
+"/**
+          useMetadata:
+          {\\"attributePassing\\":{\\"enabled\\":true,\\"customRef\\":\\"buttonRef\\"}}
+          */
+
+\\"use client\\";
+import * as React from \\"react\\";
+import { useRef } from \\"react\\";
+
+function BasicRefAttributePassingCustomRefComponent(props) {
+  const buttonRef = useRef(null);
+
+  return (
+    <div>
+      <button ref={buttonRef}>Attribute Passing</button>
+    </div>
+  );
+}
+
+export default BasicRefAttributePassingCustomRefComponent;
+"
+`;
+
 exports[`React - stateType: solid > jsx > Javascript Test > class + ClassName + css 1`] = `
 "import * as React from \\"react\\";
 import MyComp from \\"./my-component\\";
@@ -5793,6 +5837,50 @@ export default MyBasicOnUpdateReturnComponent;
 "
 `;
 
+exports[`React - stateType: solid > jsx > Typescript Test > basicRefAttributePassing 1`] = `
+"/**
+          useMetadata:
+          {\\"attributePassing\\":{\\"enabled\\":true}}
+          */
+
+\\"use client\\";
+import * as React from \\"react\\";
+import { useRef } from \\"react\\";
+
+function BasicRefAttributePassingComponent(props: any) {
+  const buttonRef = useRef<HTMLButtonElement | null>(null);
+
+  return <button ref={buttonRef}>Attribute Passing</button>;
+}
+
+export default BasicRefAttributePassingComponent;
+"
+`;
+
+exports[`React - stateType: solid > jsx > Typescript Test > basicRefAttributePassingCustomRef 1`] = `
+"/**
+          useMetadata:
+          {\\"attributePassing\\":{\\"enabled\\":true,\\"customRef\\":\\"buttonRef\\"}}
+          */
+
+\\"use client\\";
+import * as React from \\"react\\";
+import { useRef } from \\"react\\";
+
+function BasicRefAttributePassingCustomRefComponent(props: any) {
+  const buttonRef = useRef<HTMLButtonElement | null>(null);
+
+  return (
+    <div>
+      <button ref={buttonRef}>Attribute Passing</button>
+    </div>
+  );
+}
+
+export default BasicRefAttributePassingCustomRefComponent;
+"
+`;
+
 exports[`React - stateType: solid > jsx > Typescript Test > class + ClassName + css 1`] = `
 "import * as React from \\"react\\";
 import MyComp from \\"./my-component\\";
diff --git a/packages/core/src/__tests__/__snapshots__/react-state-valtio.test.ts.snap b/packages/core/src/__tests__/__snapshots__/react-state-valtio.test.ts.snap
index e7c9ed47cf..6a126a1ca1 100644
--- a/packages/core/src/__tests__/__snapshots__/react-state-valtio.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/react-state-valtio.test.ts.snap
@@ -1871,6 +1871,50 @@ export default MyBasicOnUpdateReturnComponent;
 "
 `;
 
+exports[`React - stateType: valtio > jsx > Javascript Test > basicRefAttributePassing 1`] = `
+"/**
+          useMetadata:
+          {\\"attributePassing\\":{\\"enabled\\":true}}
+          */
+
+\\"use client\\";
+import * as React from \\"react\\";
+import { useRef } from \\"react\\";
+
+function BasicRefAttributePassingComponent(props) {
+  const buttonRef = useRef(null);
+
+  return <button ref={buttonRef}>Attribute Passing</button>;
+}
+
+export default BasicRefAttributePassingComponent;
+"
+`;
+
+exports[`React - stateType: valtio > jsx > Javascript Test > basicRefAttributePassingCustomRef 1`] = `
+"/**
+          useMetadata:
+          {\\"attributePassing\\":{\\"enabled\\":true,\\"customRef\\":\\"buttonRef\\"}}
+          */
+
+\\"use client\\";
+import * as React from \\"react\\";
+import { useRef } from \\"react\\";
+
+function BasicRefAttributePassingCustomRefComponent(props) {
+  const buttonRef = useRef(null);
+
+  return (
+    <div>
+      <button ref={buttonRef}>Attribute Passing</button>
+    </div>
+  );
+}
+
+export default BasicRefAttributePassingCustomRefComponent;
+"
+`;
+
 exports[`React - stateType: valtio > jsx > Javascript Test > class + ClassName + css 1`] = `
 "import * as React from \\"react\\";
 import MyComp from \\"./my-component\\";
@@ -5799,6 +5843,50 @@ export default MyBasicOnUpdateReturnComponent;
 "
 `;
 
+exports[`React - stateType: valtio > jsx > Typescript Test > basicRefAttributePassing 1`] = `
+"/**
+          useMetadata:
+          {\\"attributePassing\\":{\\"enabled\\":true}}
+          */
+
+\\"use client\\";
+import * as React from \\"react\\";
+import { useRef } from \\"react\\";
+
+function BasicRefAttributePassingComponent(props: any) {
+  const buttonRef = useRef<HTMLButtonElement | null>(null);
+
+  return <button ref={buttonRef}>Attribute Passing</button>;
+}
+
+export default BasicRefAttributePassingComponent;
+"
+`;
+
+exports[`React - stateType: valtio > jsx > Typescript Test > basicRefAttributePassingCustomRef 1`] = `
+"/**
+          useMetadata:
+          {\\"attributePassing\\":{\\"enabled\\":true,\\"customRef\\":\\"buttonRef\\"}}
+          */
+
+\\"use client\\";
+import * as React from \\"react\\";
+import { useRef } from \\"react\\";
+
+function BasicRefAttributePassingCustomRefComponent(props: any) {
+  const buttonRef = useRef<HTMLButtonElement | null>(null);
+
+  return (
+    <div>
+      <button ref={buttonRef}>Attribute Passing</button>
+    </div>
+  );
+}
+
+export default BasicRefAttributePassingCustomRefComponent;
+"
+`;
+
 exports[`React - stateType: valtio > jsx > Typescript Test > class + ClassName + css 1`] = `
 "import * as React from \\"react\\";
 import MyComp from \\"./my-component\\";
diff --git a/packages/core/src/__tests__/__snapshots__/react-state-variables.test.ts.snap b/packages/core/src/__tests__/__snapshots__/react-state-variables.test.ts.snap
index b3f4293bd6..d727f0e108 100644
--- a/packages/core/src/__tests__/__snapshots__/react-state-variables.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/react-state-variables.test.ts.snap
@@ -1300,6 +1300,50 @@ export default MyBasicOnUpdateReturnComponent;
 "
 `;
 
+exports[`React - stateType: variables > jsx > Javascript Test > basicRefAttributePassing 1`] = `
+"/**
+          useMetadata:
+          {\\"attributePassing\\":{\\"enabled\\":true}}
+          */
+
+\\"use client\\";
+import * as React from \\"react\\";
+import { useRef } from \\"react\\";
+
+function BasicRefAttributePassingComponent(props) {
+  const buttonRef = useRef(null);
+
+  return <button ref={buttonRef}>Attribute Passing</button>;
+}
+
+export default BasicRefAttributePassingComponent;
+"
+`;
+
+exports[`React - stateType: variables > jsx > Javascript Test > basicRefAttributePassingCustomRef 1`] = `
+"/**
+          useMetadata:
+          {\\"attributePassing\\":{\\"enabled\\":true,\\"customRef\\":\\"buttonRef\\"}}
+          */
+
+\\"use client\\";
+import * as React from \\"react\\";
+import { useRef } from \\"react\\";
+
+function BasicRefAttributePassingCustomRefComponent(props) {
+  const buttonRef = useRef(null);
+
+  return (
+    <div>
+      <button ref={buttonRef}>Attribute Passing</button>
+    </div>
+  );
+}
+
+export default BasicRefAttributePassingCustomRefComponent;
+"
+`;
+
 exports[`React - stateType: variables > jsx > Javascript Test > class + ClassName + css 1`] = `
 "import * as React from \\"react\\";
 import MyComp from \\"./my-component\\";
@@ -4321,6 +4365,50 @@ export default MyBasicOnUpdateReturnComponent;
 "
 `;
 
+exports[`React - stateType: variables > jsx > Typescript Test > basicRefAttributePassing 1`] = `
+"/**
+          useMetadata:
+          {\\"attributePassing\\":{\\"enabled\\":true}}
+          */
+
+\\"use client\\";
+import * as React from \\"react\\";
+import { useRef } from \\"react\\";
+
+function BasicRefAttributePassingComponent(props: any) {
+  const buttonRef = useRef<HTMLButtonElement | null>(null);
+
+  return <button ref={buttonRef}>Attribute Passing</button>;
+}
+
+export default BasicRefAttributePassingComponent;
+"
+`;
+
+exports[`React - stateType: variables > jsx > Typescript Test > basicRefAttributePassingCustomRef 1`] = `
+"/**
+          useMetadata:
+          {\\"attributePassing\\":{\\"enabled\\":true,\\"customRef\\":\\"buttonRef\\"}}
+          */
+
+\\"use client\\";
+import * as React from \\"react\\";
+import { useRef } from \\"react\\";
+
+function BasicRefAttributePassingCustomRefComponent(props: any) {
+  const buttonRef = useRef<HTMLButtonElement | null>(null);
+
+  return (
+    <div>
+      <button ref={buttonRef}>Attribute Passing</button>
+    </div>
+  );
+}
+
+export default BasicRefAttributePassingCustomRefComponent;
+"
+`;
+
 exports[`React - stateType: variables > jsx > Typescript Test > class + ClassName + css 1`] = `
 "import * as React from \\"react\\";
 import MyComp from \\"./my-component\\";
diff --git a/packages/core/src/__tests__/__snapshots__/react.test.ts.snap b/packages/core/src/__tests__/__snapshots__/react.test.ts.snap
index 98120ce9d2..3e732de3f5 100644
--- a/packages/core/src/__tests__/__snapshots__/react.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/react.test.ts.snap
@@ -1848,6 +1848,50 @@ export default MyBasicOnUpdateReturnComponent;
 "
 `;
 
+exports[`React - stateType: useState > jsx > Javascript Test > basicRefAttributePassing 1`] = `
+"/**
+          useMetadata:
+          {\\"attributePassing\\":{\\"enabled\\":true}}
+          */
+
+\\"use client\\";
+import * as React from \\"react\\";
+import { useRef } from \\"react\\";
+
+function BasicRefAttributePassingComponent(props) {
+  const buttonRef = useRef(null);
+
+  return <button ref={buttonRef}>Attribute Passing</button>;
+}
+
+export default BasicRefAttributePassingComponent;
+"
+`;
+
+exports[`React - stateType: useState > jsx > Javascript Test > basicRefAttributePassingCustomRef 1`] = `
+"/**
+          useMetadata:
+          {\\"attributePassing\\":{\\"enabled\\":true,\\"customRef\\":\\"buttonRef\\"}}
+          */
+
+\\"use client\\";
+import * as React from \\"react\\";
+import { useRef } from \\"react\\";
+
+function BasicRefAttributePassingCustomRefComponent(props) {
+  const buttonRef = useRef(null);
+
+  return (
+    <div>
+      <button ref={buttonRef}>Attribute Passing</button>
+    </div>
+  );
+}
+
+export default BasicRefAttributePassingCustomRefComponent;
+"
+`;
+
 exports[`React - stateType: useState > jsx > Javascript Test > class + ClassName + css 1`] = `
 "import * as React from \\"react\\";
 import MyComp from \\"./my-component\\";
@@ -5775,6 +5819,50 @@ export default MyBasicOnUpdateReturnComponent;
 "
 `;
 
+exports[`React - stateType: useState > jsx > Typescript Test > basicRefAttributePassing 1`] = `
+"/**
+          useMetadata:
+          {\\"attributePassing\\":{\\"enabled\\":true}}
+          */
+
+\\"use client\\";
+import * as React from \\"react\\";
+import { useRef } from \\"react\\";
+
+function BasicRefAttributePassingComponent(props: any) {
+  const buttonRef = useRef<HTMLButtonElement | null>(null);
+
+  return <button ref={buttonRef}>Attribute Passing</button>;
+}
+
+export default BasicRefAttributePassingComponent;
+"
+`;
+
+exports[`React - stateType: useState > jsx > Typescript Test > basicRefAttributePassingCustomRef 1`] = `
+"/**
+          useMetadata:
+          {\\"attributePassing\\":{\\"enabled\\":true,\\"customRef\\":\\"buttonRef\\"}}
+          */
+
+\\"use client\\";
+import * as React from \\"react\\";
+import { useRef } from \\"react\\";
+
+function BasicRefAttributePassingCustomRefComponent(props: any) {
+  const buttonRef = useRef<HTMLButtonElement | null>(null);
+
+  return (
+    <div>
+      <button ref={buttonRef}>Attribute Passing</button>
+    </div>
+  );
+}
+
+export default BasicRefAttributePassingCustomRefComponent;
+"
+`;
+
 exports[`React - stateType: useState > jsx > Typescript Test > class + ClassName + css 1`] = `
 "import * as React from \\"react\\";
 import MyComp from \\"./my-component\\";
diff --git a/packages/core/src/__tests__/__snapshots__/rsc.test.ts.snap b/packages/core/src/__tests__/__snapshots__/rsc.test.ts.snap
index cfd4fdd68a..eedd1cf857 100644
--- a/packages/core/src/__tests__/__snapshots__/rsc.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/rsc.test.ts.snap
@@ -1930,6 +1930,50 @@ export default MyBasicOnUpdateReturnComponent;
 "
 `;
 
+exports[`RSC > jsx > Javascript Test > basicRefAttributePassing 1`] = `
+"/**
+          useMetadata:
+          {\\"attributePassing\\":{\\"enabled\\":true}}
+          */
+
+\\"use client\\";
+import * as React from \\"react\\";
+import { useRef } from \\"react\\";
+
+function BasicRefAttributePassingComponent(props) {
+  const buttonRef = useRef(null);
+
+  return <button ref={buttonRef}>Attribute Passing</button>;
+}
+
+export default BasicRefAttributePassingComponent;
+"
+`;
+
+exports[`RSC > jsx > Javascript Test > basicRefAttributePassingCustomRef 1`] = `
+"/**
+          useMetadata:
+          {\\"attributePassing\\":{\\"enabled\\":true,\\"customRef\\":\\"buttonRef\\"}}
+          */
+
+\\"use client\\";
+import * as React from \\"react\\";
+import { useRef } from \\"react\\";
+
+function BasicRefAttributePassingCustomRefComponent(props) {
+  const buttonRef = useRef(null);
+
+  return (
+    <div>
+      <button ref={buttonRef}>Attribute Passing</button>
+    </div>
+  );
+}
+
+export default BasicRefAttributePassingCustomRefComponent;
+"
+`;
+
 exports[`RSC > jsx > Javascript Test > class + ClassName + css 1`] = `
 "/**
           useMetadata:
@@ -5841,6 +5885,50 @@ export default MyBasicOnUpdateReturnComponent;
 "
 `;
 
+exports[`RSC > jsx > Typescript Test > basicRefAttributePassing 1`] = `
+"/**
+          useMetadata:
+          {\\"attributePassing\\":{\\"enabled\\":true}}
+          */
+
+\\"use client\\";
+import * as React from \\"react\\";
+import { useRef } from \\"react\\";
+
+function BasicRefAttributePassingComponent(props: any) {
+  const buttonRef = useRef<HTMLButtonElement | null>(null);
+
+  return <button ref={buttonRef}>Attribute Passing</button>;
+}
+
+export default BasicRefAttributePassingComponent;
+"
+`;
+
+exports[`RSC > jsx > Typescript Test > basicRefAttributePassingCustomRef 1`] = `
+"/**
+          useMetadata:
+          {\\"attributePassing\\":{\\"enabled\\":true,\\"customRef\\":\\"buttonRef\\"}}
+          */
+
+\\"use client\\";
+import * as React from \\"react\\";
+import { useRef } from \\"react\\";
+
+function BasicRefAttributePassingCustomRefComponent(props: any) {
+  const buttonRef = useRef<HTMLButtonElement | null>(null);
+
+  return (
+    <div>
+      <button ref={buttonRef}>Attribute Passing</button>
+    </div>
+  );
+}
+
+export default BasicRefAttributePassingCustomRefComponent;
+"
+`;
+
 exports[`RSC > jsx > Typescript Test > class + ClassName + css 1`] = `
 "/**
           useMetadata:
diff --git a/packages/core/src/__tests__/__snapshots__/solid.test.ts.snap b/packages/core/src/__tests__/__snapshots__/solid.test.ts.snap
index cf97f5963c..d1dd402cc3 100644
--- a/packages/core/src/__tests__/__snapshots__/solid.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/solid.test.ts.snap
@@ -4212,6 +4212,90 @@ export default MyBasicOnUpdateReturnComponent;
 "
 `;
 
+exports[`Solid > jsx > Javascript Test > basicRefAttributePassing 1`] = `
+"/**
+          useMetadata:
+          {\\"attributePassing\\":{\\"enabled\\":true}}
+          */
+
+function BasicRefAttributePassingComponent(props) {
+  let buttonRef;
+
+  return (
+    <>
+      <button ref={buttonRef}>Attribute Passing</button>
+    </>
+  );
+}
+
+export default BasicRefAttributePassingComponent;
+"
+`;
+
+exports[`Solid > jsx > Javascript Test > basicRefAttributePassing 2`] = `
+"/**
+          useMetadata:
+          {\\"attributePassing\\":{\\"enabled\\":true}}
+          */
+
+function BasicRefAttributePassingComponent(props) {
+  let buttonRef;
+
+  return (
+    <>
+      <button ref={buttonRef}>Attribute Passing</button>
+    </>
+  );
+}
+
+export default BasicRefAttributePassingComponent;
+"
+`;
+
+exports[`Solid > jsx > Javascript Test > basicRefAttributePassingCustomRef 1`] = `
+"/**
+          useMetadata:
+          {\\"attributePassing\\":{\\"enabled\\":true,\\"customRef\\":\\"buttonRef\\"}}
+          */
+
+function BasicRefAttributePassingCustomRefComponent(props) {
+  let buttonRef;
+
+  return (
+    <>
+      <div>
+        <button ref={buttonRef}>Attribute Passing</button>
+      </div>
+    </>
+  );
+}
+
+export default BasicRefAttributePassingCustomRefComponent;
+"
+`;
+
+exports[`Solid > jsx > Javascript Test > basicRefAttributePassingCustomRef 2`] = `
+"/**
+          useMetadata:
+          {\\"attributePassing\\":{\\"enabled\\":true,\\"customRef\\":\\"buttonRef\\"}}
+          */
+
+function BasicRefAttributePassingCustomRefComponent(props) {
+  let buttonRef;
+
+  return (
+    <>
+      <div>
+        <button ref={buttonRef}>Attribute Passing</button>
+      </div>
+    </>
+  );
+}
+
+export default BasicRefAttributePassingCustomRefComponent;
+"
+`;
+
 exports[`Solid > jsx > Javascript Test > class + ClassName + css 1`] = `
 "import MyComp from \\"./my-component\\";
 
@@ -12714,6 +12798,90 @@ export default MyBasicOnUpdateReturnComponent;
 "
 `;
 
+exports[`Solid > jsx > Typescript Test > basicRefAttributePassing 1`] = `
+"/**
+          useMetadata:
+          {\\"attributePassing\\":{\\"enabled\\":true}}
+          */
+
+function BasicRefAttributePassingComponent(props: any) {
+  let buttonRef: HTMLButtonElement | null;
+
+  return (
+    <>
+      <button ref={buttonRef!}>Attribute Passing</button>
+    </>
+  );
+}
+
+export default BasicRefAttributePassingComponent;
+"
+`;
+
+exports[`Solid > jsx > Typescript Test > basicRefAttributePassing 2`] = `
+"/**
+          useMetadata:
+          {\\"attributePassing\\":{\\"enabled\\":true}}
+          */
+
+function BasicRefAttributePassingComponent(props: any) {
+  let buttonRef: HTMLButtonElement | null;
+
+  return (
+    <>
+      <button ref={buttonRef!}>Attribute Passing</button>
+    </>
+  );
+}
+
+export default BasicRefAttributePassingComponent;
+"
+`;
+
+exports[`Solid > jsx > Typescript Test > basicRefAttributePassingCustomRef 1`] = `
+"/**
+          useMetadata:
+          {\\"attributePassing\\":{\\"enabled\\":true,\\"customRef\\":\\"buttonRef\\"}}
+          */
+
+function BasicRefAttributePassingCustomRefComponent(props: any) {
+  let buttonRef: HTMLButtonElement | null;
+
+  return (
+    <>
+      <div>
+        <button ref={buttonRef!}>Attribute Passing</button>
+      </div>
+    </>
+  );
+}
+
+export default BasicRefAttributePassingCustomRefComponent;
+"
+`;
+
+exports[`Solid > jsx > Typescript Test > basicRefAttributePassingCustomRef 2`] = `
+"/**
+          useMetadata:
+          {\\"attributePassing\\":{\\"enabled\\":true,\\"customRef\\":\\"buttonRef\\"}}
+          */
+
+function BasicRefAttributePassingCustomRefComponent(props: any) {
+  let buttonRef: HTMLButtonElement | null;
+
+  return (
+    <>
+      <div>
+        <button ref={buttonRef!}>Attribute Passing</button>
+      </div>
+    </>
+  );
+}
+
+export default BasicRefAttributePassingCustomRefComponent;
+"
+`;
+
 exports[`Solid > jsx > Typescript Test > class + ClassName + css 1`] = `
 "import MyComp from \\"./my-component\\";
 
diff --git a/packages/core/src/__tests__/__snapshots__/stencil.test.ts.snap b/packages/core/src/__tests__/__snapshots__/stencil.test.ts.snap
index 7958c9a80c..72627f12dd 100644
--- a/packages/core/src/__tests__/__snapshots__/stencil.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/stencil.test.ts.snap
@@ -10,6 +10,8 @@ export class MyBasicForShowComponent {
   @State() name = \\"PatrickJS\\";
   @State() names = [\\"Steve\\", \\"PatrickJS\\"];
 
+  componentDidLoad() {}
+
   render() {
     return (
       <main>
@@ -95,6 +97,8 @@ export class MyBasicRefComponent {
     return this.name.toLowerCase();
   };
 
+  componentDidLoad() {}
+
   componentDidUpdate() {
     console.log(\\"Received an update\\");
   }
@@ -106,12 +110,19 @@ export class MyBasicRefComponent {
           <Fragment>
             <input
               class=\\"input\\"
-              ref={(el) => (this.inputRef = el)}
+              ref={(el: any) => {
+                this.inputRef = el;
+              }}
               value={this.name}
               onBlur={(event) => this.onBlur()}
               onChange={(event) => (this.name = event.target.value)}
             />
-            <label for=\\"cars\\" ref={(el) => (this.inputNoArgRef = el)}>
+            <label
+              for=\\"cars\\"
+              ref={(el: any) => {
+                this.inputNoArgRef = el;
+              }}
+            >
               Choose a car:
             </label>
             <select name=\\"cars\\" id=\\"cars\\">
@@ -155,6 +166,8 @@ export class MyBasicComponent {
     return \\"bar\\";
   }
 
+  componentDidLoad() {}
+
   render() {
     return (
       <div class=\\"test div\\">
@@ -180,6 +193,8 @@ export class MyBasicForShowComponent {
   @State() name = \\"PatrickJS\\";
   @State() names = [\\"Steve\\", \\"PatrickJS\\"];
 
+  componentDidLoad() {}
+
   render() {
     return (
       <div>
@@ -327,6 +342,8 @@ exports[`Stencil > jsx > Javascript Test > BasicAttribute 1`] = `
   tag: \\"my-component\\",
 })
 export class MyComponent {
+  componentDidLoad() {}
+
   render() {
     return <input autocapitalize=\\"on\\" autocomplete=\\"on\\" spellcheck={true} />;
   }
@@ -346,6 +363,8 @@ export class MyBooleanAttribute {
   @Prop() children: any;
   @Prop() type: any;
 
+  componentDidLoad() {}
+
   render() {
     return (
       <div>
@@ -384,6 +403,8 @@ export class MyBasicChildComponent {
   @State() name = \\"Steve\\";
   @State() dev = \\"PatrickJS\\";
 
+  componentDidLoad() {}
+
   render() {
     return (
       <div>
@@ -464,6 +485,8 @@ export class MyBasicRefComponent {
     return this.name.toLowerCase();
   };
 
+  componentDidLoad() {}
+
   render() {
     return (
       <div>
@@ -471,12 +494,19 @@ export class MyBasicRefComponent {
           <Fragment>
             <input
               class=\\"input\\"
-              ref={(el) => (this.inputRef = el)}
+              ref={(el: any) => {
+                this.inputRef = el;
+              }}
               value={this.name}
               onBlur={(event) => this.onBlur()}
               onChange={(event) => (this.name = event.target.value)}
             />
-            <label for=\\"cars\\" ref={(el) => (this.inputNoArgRef = el)}>
+            <label
+              for=\\"cars\\"
+              ref={(el: any) => {
+                this.inputNoArgRef = el;
+              }}
+            >
               Choose a car:
             </label>
             <select name=\\"cars\\" id=\\"cars\\">
@@ -510,6 +540,8 @@ export class MyBasicRefAssignmentComponent {
     this.holdValueRef = this.holdValueRef + \\"JS\\";
   };
 
+  componentDidLoad() {}
+
   render() {
     return (
       <div>
@@ -547,6 +579,8 @@ export class MyPreviousComponent {
 
   @State() count = 0;
 
+  componentDidLoad() {}
+
   componentDidUpdate() {
     this.prevCount = this.count;
   }
@@ -579,6 +613,8 @@ export class Button {
   @Prop() openLinkInNewTab: any;
   @Prop() text: any;
 
+  componentDidLoad() {}
+
   render() {
     return (
       <div>
@@ -652,6 +688,8 @@ export class Column {
     return \`calc(\${this.getWidth(index)}% - \${subtractWidth}px)\`;
   }
 
+  componentDidLoad() {}
+
   render() {
     return (
       <div class=\\"builder-columns div\\">
@@ -677,6 +715,8 @@ exports[`Stencil > jsx > Javascript Test > ContentSlotHtml 1`] = `
 export class ContentSlotCode {
   @Prop() slotTesting: any;
 
+  componentDidLoad() {}
+
   render() {
     return (
       <div>
@@ -716,6 +756,8 @@ export class ContentSlotJsxCode {
     this.slotContent ? 1 : \\"\\";
   }
 
+  componentDidLoad() {}
+
   render() {
     return (
       <Host>
@@ -810,7 +852,9 @@ export class CustomCode {
         class={
           \\"builder-custom-code\\" + (this.replaceNodes ? \\" replace-nodes\\" : \\"\\")
         }
-        ref={(el) => (this.elem = el)}
+        ref={(el: any) => {
+          this.elem = el;
+        }}
         innerHTML={this.code}
       ></div>
     );
@@ -884,7 +928,9 @@ export class CustomCode {
         class={
           \\"builder-custom-code\\" + (this.replaceNodes ? \\" replace-nodes\\" : \\"\\")
         }
-        ref={(el) => (this.elem = el)}
+        ref={(el: any) => {
+          this.elem = el;
+        }}
         innerHTML={this.code}
       ></div>
     );
@@ -1156,11 +1202,15 @@ export class FormComponent {
     }
   }
 
+  componentDidLoad() {}
+
   render() {
     return (
       <form
         validate={this.validate}
-        ref={(el) => (this.formRef = el)}
+        ref={(el: any) => {
+          this.formRef = el;
+        }}
         action={!this.sendWithJs && this.action}
         method={this.method}
         name={this.name}
@@ -1280,7 +1330,11 @@ export class Image {
   render() {
     return (
       <div>
-        <picture ref={(el) => (this.pictureRef = el)}>
+        <picture
+          ref={(el: any) => {
+            this.pictureRef = el;
+          }}
+        >
           {!this.useLazyLoading() || this.load ? (
             <img
               class={
@@ -1316,6 +1370,8 @@ export class ImgStateComponent {
   @State() canShow = true;
   @State() images = [\\"http://example.com/qwik.png\\"];
 
+  componentDidLoad() {}
+
   render() {
     return (
       <div>
@@ -1346,6 +1402,8 @@ export class ImgComponent {
   @Prop() imgSrc: any;
   @Prop() altText: any;
 
+  componentDidLoad() {}
+
   render() {
     return (
       <img
@@ -1382,6 +1440,8 @@ export class FormInputComponent {
   @Prop() required: any;
   @Event() onChange: any;
 
+  componentDidLoad() {}
+
   render() {
     return (
       <input
@@ -1418,6 +1478,8 @@ export class Stepper {
     console.log(value);
   }
 
+  componentDidLoad() {}
+
   render() {
     return (
       <form-input-component
@@ -1441,6 +1503,8 @@ export class NestedStore {
   @State() _id = \\"abc\\";
   @State() _messageId = this._id + \\"-message\\";
 
+  componentDidLoad() {}
+
   render() {
     return (
       <div id={this._id}>
@@ -1463,6 +1527,8 @@ export class RawText {
   @Prop() attributes: any;
   @Prop() text: any;
 
+  componentDidLoad() {}
+
   render() {
     return (
       <span
@@ -1486,6 +1552,8 @@ export class SectionComponent {
   @Prop() maxWidth: any;
   @Prop() children: any;
 
+  componentDidLoad() {}
+
   render() {
     return (
       <section
@@ -1518,6 +1586,8 @@ export class SectionStateComponent {
   @State() max = 42;
   @State() items = [42];
 
+  componentDidLoad() {}
+
   render() {
     return (
       <Host>
@@ -1555,6 +1625,8 @@ export class SelectComponent {
   @Prop() name: any;
   @Prop() options: any;
 
+  componentDidLoad() {}
+
   render() {
     return (
       <select
@@ -1587,6 +1659,8 @@ exports[`Stencil > jsx > Javascript Test > SlotDefault 1`] = `
   tag: \\"slot-code\\",
 })
 export class SlotCode {
+  componentDidLoad() {}
+
   render() {
     return (
       <div>
@@ -1609,6 +1683,8 @@ import { Component, h, Fragment } from \\"@stencil/core\\";
   tag: \\"slot-code\\",
 })
 export class SlotCode {
+  componentDidLoad() {}
+
   render() {
     return (
       <div>
@@ -1631,6 +1707,8 @@ import { Component, h, Fragment } from \\"@stencil/core\\";
   tag: \\"slot-code\\",
 })
 export class SlotCode {
+  componentDidLoad() {}
+
   render() {
     return (
       <div>
@@ -1649,6 +1727,8 @@ exports[`Stencil > jsx > Javascript Test > SlotNamed 1`] = `
   tag: \\"slot-code\\",
 })
 export class SlotCode {
+  componentDidLoad() {}
+
   render() {
     return (
       <div>
@@ -1779,6 +1859,8 @@ export class StringLiteralStore {
 
   bar() {}
 
+  componentDidLoad() {}
+
   render() {
     return <Fragment>{this.foo}</Fragment>;
   }
@@ -1799,6 +1881,8 @@ export class MyComponent {
     return errors;
   }
 
+  componentDidLoad() {}
+
   render() {
     return <Fragment>{this.foo(this.errors)}</Fragment>;
   }
@@ -1819,6 +1903,8 @@ export class MyComponent {
     return this.foo;
   }
 
+  componentDidLoad() {}
+
   render() {
     return <Fragment>{this.bar()}</Fragment>;
   }
@@ -1836,6 +1922,8 @@ export class SubmitButton {
   @Prop() attributes: any;
   @Prop() text: any;
 
+  componentDidLoad() {}
+
   render() {
     return (
       <button type=\\"submit\\" {...this.attributes}>
@@ -1860,6 +1948,8 @@ export class Text {
   @Prop() content: any;
   @State() name = \\"Decadef20\\";
 
+  componentDidLoad() {}
+
   render() {
     return (
       <div
@@ -1893,6 +1983,8 @@ export class Textarea {
   @Prop() value: any;
   @Prop() defaultValue: any;
 
+  componentDidLoad() {}
+
   render() {
     return (
       <textarea
@@ -1927,6 +2019,8 @@ export class UseValueAndFnFromStore {
     }
   }
 
+  componentDidLoad() {}
+
   componentDidUpdate() {
     if (this._do) {
       this._do(this._id);
@@ -1957,6 +2051,8 @@ export class Video {
   @Prop() controls: any;
   @Prop() loop: any;
 
+  componentDidLoad() {}
+
   render() {
     return (
       <video
@@ -2001,6 +2097,8 @@ export class MyComponent {
     this.name = value;
   }
 
+  componentDidLoad() {}
+
   render() {
     return (
       <div>
@@ -2022,6 +2120,8 @@ exports[`Stencil > jsx > Javascript Test > basicForFragment 1`] = `
 export class BasicForFragment {
   @State() id = \\"xyz\\";
 
+  componentDidLoad() {}
+
   render() {
     return (
       <div>
@@ -2065,6 +2165,8 @@ export class MyBasicForNoTagRefComponent {
     return \\"span\\";
   }
 
+  componentDidLoad() {}
+
   render() {
     return (
       <this.TagNameGetter>
@@ -2099,12 +2201,16 @@ export class MyBasicForwardRefComponent {
   @Prop() inputRef: any;
   @State() name = \\"PatrickJS\\";
 
+  componentDidLoad() {}
+
   render() {
     return (
       <div>
         <input
           class=\\"input\\"
-          ref={(el) => (this.inputRef = el)}
+          ref={(el: any) => {
+            this.inputRef = el;
+          }}
           value={this.name}
           onChange={(event) => (this.name = event.target.value)}
         />
@@ -2136,12 +2242,16 @@ export class MyBasicForwardRefComponent {
   @Prop() inputRef: any;
   @State() name = \\"PatrickJS\\";
 
+  componentDidLoad() {}
+
   render() {
     return (
       <div>
         <input
           class=\\"input\\"
-          ref={(el) => (this.inputRef = el)}
+          ref={(el: any) => {
+            this.inputRef = el;
+          }}
           value={this.name}
           onChange={(event) => (this.name = event.target.value)}
         />
@@ -2161,6 +2271,8 @@ exports[`Stencil > jsx > Javascript Test > basicOnUpdateReturn 1`] = `
 export class MyBasicOnUpdateReturnComponent {
   @State() name = \\"PatrickJS\\";
 
+  componentDidLoad() {}
+
   componentDidUpdate() {
     const controller = new AbortController();
     const signal = controller.signal;
@@ -2190,6 +2302,162 @@ export class MyBasicOnUpdateReturnComponent {
 "
 `;
 
+exports[`Stencil > jsx > Javascript Test > basicRefAttributePassing 1`] = `
+"/**
+          useMetadata:
+          {\\"attributePassing\\":{\\"enabled\\":true}}
+          */
+
+import { Component, h, Fragment } from \\"@stencil/core\\";
+
+@Component({
+  tag: \\"basic-ref-attribute-passing-component\\",
+})
+export class BasicRefAttributePassingComponent {
+  private buttonRef!: HTMLElement;
+  private _root!: HTMLElement;
+
+  /**
+   * Passes \`aria-*\`, \`data-*\` & \`class\` attributes to correct child. Used in angular and stencil.
+   * @param element  the ref for the component
+   * @param customElementSelector  the custom element like \`my-component\`
+   */
+  private enableAttributePassing(
+    element: HTMLElement | null,
+    customElementSelector: string
+  ) {
+    const parent = element?.closest(customElementSelector);
+    if (element && parent) {
+      const attributes = parent.attributes;
+      for (let i = 0; i < attributes.length; i++) {
+        const attr = attributes.item(i);
+        if (
+          attr &&
+          (attr.name.startsWith(\\"data-\\") || attr.name.startsWith(\\"aria-\\"))
+        ) {
+          element.setAttribute(attr.name, attr.value);
+          parent.removeAttribute(attr.name);
+        }
+        if (attr && attr.name === \\"class\\") {
+          const isWebComponent = attr.value.includes(\\"hydrated\\");
+          const value = attr.value.replace(\\"hydrated\\", \\"\\").trim();
+          const currentClass = element.getAttribute(\\"class\\");
+          element.setAttribute(
+            attr.name,
+            \`\${currentClass ? \`\${currentClass} \` : \\"\\"}\${value}\`
+          );
+          if (isWebComponent) {
+            // Stencil is using this class for lazy loading component
+            parent.setAttribute(\\"class\\", \\"hydrated\\");
+          } else {
+            parent.removeAttribute(attr.name);
+          }
+        }
+      }
+    }
+  }
+
+  componentDidLoad() {
+    this.enableAttributePassing(
+      this._root,
+      \\"basic-ref-attribute-passing-component\\"
+    );
+  }
+
+  render() {
+    return (
+      <button
+        ref={(el: any) => {
+          this._root = el;
+          this.buttonRef = el;
+        }}
+      >
+        Attribute Passing
+      </button>
+    );
+  }
+}
+"
+`;
+
+exports[`Stencil > jsx > Javascript Test > basicRefAttributePassingCustomRef 1`] = `
+"/**
+          useMetadata:
+          {\\"attributePassing\\":{\\"enabled\\":true,\\"customRef\\":\\"buttonRef\\"}}
+          */
+
+import { Component, h, Fragment } from \\"@stencil/core\\";
+
+@Component({
+  tag: \\"basic-ref-attribute-passing-custom-ref-component\\",
+})
+export class BasicRefAttributePassingCustomRefComponent {
+  private buttonRef!: HTMLElement;
+
+  /**
+   * Passes \`aria-*\`, \`data-*\` & \`class\` attributes to correct child. Used in angular and stencil.
+   * @param element  the ref for the component
+   * @param customElementSelector  the custom element like \`my-component\`
+   */
+  private enableAttributePassing(
+    element: HTMLElement | null,
+    customElementSelector: string
+  ) {
+    const parent = element?.closest(customElementSelector);
+    if (element && parent) {
+      const attributes = parent.attributes;
+      for (let i = 0; i < attributes.length; i++) {
+        const attr = attributes.item(i);
+        if (
+          attr &&
+          (attr.name.startsWith(\\"data-\\") || attr.name.startsWith(\\"aria-\\"))
+        ) {
+          element.setAttribute(attr.name, attr.value);
+          parent.removeAttribute(attr.name);
+        }
+        if (attr && attr.name === \\"class\\") {
+          const isWebComponent = attr.value.includes(\\"hydrated\\");
+          const value = attr.value.replace(\\"hydrated\\", \\"\\").trim();
+          const currentClass = element.getAttribute(\\"class\\");
+          element.setAttribute(
+            attr.name,
+            \`\${currentClass ? \`\${currentClass} \` : \\"\\"}\${value}\`
+          );
+          if (isWebComponent) {
+            // Stencil is using this class for lazy loading component
+            parent.setAttribute(\\"class\\", \\"hydrated\\");
+          } else {
+            parent.removeAttribute(attr.name);
+          }
+        }
+      }
+    }
+  }
+
+  componentDidLoad() {
+    this.enableAttributePassing(
+      this.buttonRef,
+      \\"basic-ref-attribute-passing-custom-ref-component\\"
+    );
+  }
+
+  render() {
+    return (
+      <div>
+        <button
+          ref={(el: any) => {
+            this.buttonRef = el;
+          }}
+        >
+          Attribute Passing
+        </button>
+      </div>
+    );
+  }
+}
+"
+`;
+
 exports[`Stencil > jsx > Javascript Test > class + ClassName + css 1`] = `
 "import { MyComp } from \\"./my-component.lite\\";
 
@@ -2205,6 +2473,8 @@ import { Component, h, Fragment } from \\"@stencil/core\\";
 \`,
 })
 export class MyBasicComponent {
+  componentDidLoad() {}
+
   render() {
     return (
       <div>
@@ -2234,6 +2504,8 @@ exports[`Stencil > jsx > Javascript Test > class + css 1`] = `
 \`,
 })
 export class MyBasicComponent {
+  componentDidLoad() {}
+
   render() {
     return (
       <div class=\\"test div\\">
@@ -2258,6 +2530,8 @@ exports[`Stencil > jsx > Javascript Test > className + css 1`] = `
 \`,
 })
 export class MyBasicComponent {
+  componentDidLoad() {}
+
   render() {
     return (
       <div class=\\"test div\\">
@@ -2278,6 +2552,8 @@ exports[`Stencil > jsx > Javascript Test > className 1`] = `
 export class ClassNameCode {
   @State() bindings = \\"a binding\\";
 
+  componentDidLoad() {}
+
   render() {
     return (
       <div>
@@ -2308,6 +2584,8 @@ export class MyBasicComponent {
     color: \\"red\\",
   };
 
+  componentDidLoad() {}
+
   render() {
     return (
       <div class={this.classState + \\" div\\"} style={this.styleState}>
@@ -2331,6 +2609,8 @@ import { Component, h, Fragment } from \\"@stencil/core\\";
   tag: \\"complex-meta-raw\\",
 })
 export class ComplexMetaRaw {
+  componentDidLoad() {}
+
   render() {
     return <div></div>;
   }
@@ -2350,6 +2630,8 @@ import { Component, h, Fragment, Prop } from \\"@stencil/core\\";
 export class ComponentWithContext {
   @Prop() content: any;
 
+  componentDidLoad() {}
+
   render() {
     return (
       <Fragment>
@@ -2373,6 +2655,8 @@ import { Component, h, Fragment, Prop } from \\"@stencil/core\\";
 export class ComponentWithContext {
   @Prop() content: any;
 
+  componentDidLoad() {}
+
   render() {
     return (
       <Fragment>
@@ -2397,6 +2681,8 @@ export class RenderContent {
   @Prop() content: any;
   @Prop() customComponents: any;
 
+  componentDidLoad() {}
+
   render() {
     return <div>setting context</div>;
   }
@@ -2420,6 +2706,8 @@ export class Button {
   };
   @Prop() buttonText: any;
 
+  componentDidLoad() {}
+
   render() {
     return (
       <div>
@@ -2461,6 +2749,8 @@ export class Button {
   @Prop() text: any = \\"default text\\";
   @Event() onClick: any = () => {};
 
+  componentDidLoad() {}
+
   render() {
     return (
       <div>
@@ -2502,6 +2792,8 @@ import { Component, h, Fragment, Prop } from \\"@stencil/core\\";
 export class ComponentWithTypes {
   @Prop() name: any;
 
+  componentDidLoad() {}
+
   render() {
     return (
       <div>
@@ -2530,6 +2822,8 @@ exports[`Stencil > jsx > Javascript Test > eventInputAndChange 1`] = `
 export class EventInputAndChange {
   @State() name = \\"Steve\\";
 
+  componentDidLoad() {}
+
   render() {
     return (
       <div>
@@ -2559,6 +2853,8 @@ export class MyComponent {
     ? this.componentRef
     : null;
 
+  componentDidLoad() {}
+
   render() {
     return <div>{this.refToUse}</div>;
   }
@@ -2584,6 +2880,8 @@ export class FigmaButton {
   @Prop() size: any;
   @Prop() label: any;
 
+  componentDidLoad() {}
+
   render() {
     return (
       <button
@@ -2619,6 +2917,8 @@ export class Button {
     return i + this.foo2.length;
   }
 
+  componentDidLoad() {}
+
   render() {
     return (
       <div>
@@ -2650,6 +2950,8 @@ export class RenderContent {
     };
   }
 
+  componentDidLoad() {}
+
   render() {
     return (
       <render-block
@@ -2668,6 +2970,8 @@ exports[`Stencil > jsx > Javascript Test > multipleOnUpdate 1`] = `
   tag: \\"multiple-on-update\\",
 })
 export class MultipleOnUpdate {
+  componentDidLoad() {}
+
   componentDidUpdate() {
     console.log(\\"Runs on every update/rerender\\");
     console.log(\\"Runs on every update/rerender as well\\");
@@ -2692,6 +2996,8 @@ export class MultipleOnUpdateWithDeps {
   @State() c = \\"c\\";
   @State() d = \\"d\\";
 
+  componentDidLoad() {}
+
   componentDidUpdate() {
     console.log(\\"Runs when a or b changes\\", this.a, this.b);
 
@@ -2723,6 +3029,8 @@ export class MyBasicComponent {
     hello: \\"world\\",
   };
 
+  componentDidLoad() {}
+
   render() {
     return <input {...this.attrs} {...this} />;
   }
@@ -2765,6 +3073,8 @@ exports[`Stencil > jsx > Javascript Test > nestedStyles 1`] = `
 \`,
 })
 export class NestedStyles {
+  componentDidLoad() {}
+
   render() {
     return <div class=\\"div\\">Hello world</div>;
   }
@@ -2791,7 +3101,12 @@ export class Embed {
 
   render() {
     return (
-      <div class=\\"builder-embed\\" ref={(el) => (this.elem = el)}>
+      <div
+        class=\\"builder-embed\\"
+        ref={(el: any) => {
+          this.elem = el;
+        }}
+      >
         <div>Test</div>
       </div>
     );
@@ -2832,6 +3147,8 @@ export class OnInit {
   @Prop() name: any;
   @State() name = \\"\\";
 
+  componentDidLoad() {}
+
   render() {
     return (
       <div>
@@ -2851,6 +3168,8 @@ exports[`Stencil > jsx > Javascript Test > onInitPlain 1`] = `
   tag: \\"on-init-plain\\",
 })
 export class OnInitPlain {
+  componentDidLoad() {}
+
   render() {
     return <div></div>;
   }
@@ -2915,6 +3234,8 @@ exports[`Stencil > jsx > Javascript Test > onUpdate 1`] = `
   tag: \\"on-update\\",
 })
 export class OnUpdate {
+  componentDidLoad() {}
+
   componentDidUpdate() {
     console.log(\\"Runs on every update/rerender\\");
   }
@@ -2937,6 +3258,8 @@ export class OnUpdateWithDeps {
   @State() a = \\"a\\";
   @State() b = \\"b\\";
 
+  componentDidLoad() {}
+
   componentDidUpdate() {
     console.log(\\"Runs when a, b or size changes\\", this.a, this.b, this.size);
   }
@@ -2961,6 +3284,8 @@ import { Component, h, Fragment } from \\"@stencil/core\\";
   tag: \\"my-basic-component\\",
 })
 export class MyBasicComponent {
+  componentDidLoad() {}
+
   render() {
     return <div></div>;
   }
@@ -2977,6 +3302,8 @@ exports[`Stencil > jsx > Javascript Test > preserveTyping 1`] = `
 export class MyBasicComponent {
   @Prop() name: any;
 
+  componentDidLoad() {}
+
   render() {
     return (
       <div>
@@ -3000,6 +3327,8 @@ export class MyBasicComponent {
   @Prop() type: any;
   @State() name = \\"Decadef20\\";
 
+  componentDidLoad() {}
+
   render() {
     return (
       <div>
@@ -3022,6 +3351,8 @@ exports[`Stencil > jsx > Javascript Test > propsInterface 1`] = `
 export class MyBasicComponent {
   @Prop() name: any;
 
+  componentDidLoad() {}
+
   render() {
     return (
       <div>
@@ -3043,6 +3374,8 @@ exports[`Stencil > jsx > Javascript Test > propsType 1`] = `
 export class MyBasicComponent {
   @Prop() name: any;
 
+  componentDidLoad() {}
+
   render() {
     return (
       <div>
@@ -3070,6 +3403,8 @@ export class OnUpdate {
     };
   };
 
+  componentDidLoad() {}
+
   componentDidUpdate() {
     this.foo({
       someOption: this.bar,
@@ -3281,6 +3616,8 @@ export class RenderBlock {
     }
   }
 
+  componentDidLoad() {}
+
   render() {
     return (
       <Host>
@@ -3388,6 +3725,8 @@ export class Button {
   @Prop() openLinkInNewTab: any;
   @Prop() text: any;
 
+  componentDidLoad() {}
+
   render() {
     return (
       <Fragment>
@@ -3421,6 +3760,8 @@ exports[`Stencil > jsx > Javascript Test > self-referencing component 1`] = `
 export class MyComponent {
   @Prop() name: any;
 
+  componentDidLoad() {}
+
   render() {
     return (
       <div>
@@ -3445,6 +3786,8 @@ export class MyComponent {
   @Prop() name: any;
   @Prop() children: any;
 
+  componentDidLoad() {}
+
   render() {
     return (
       <div>
@@ -3475,6 +3818,8 @@ export class SetState {
     this.n[0] = \\"123\\";
   }
 
+  componentDidLoad() {}
+
   render() {
     return (
       <div>
@@ -3502,6 +3847,8 @@ export class MyBasicComponent {
   @Prop() id: any;
   @Prop() foo: any;
 
+  componentDidLoad() {}
+
   componentDidUpdate() {
     console.log(\\"props.id changed\\", this.id);
     console.log(\\"props.foo.value.bar.baz changed\\", this.foo.value.bar.baz);
@@ -3526,6 +3873,8 @@ exports[`Stencil > jsx > Javascript Test > spreadAttrs 1`] = `
   tag: \\"my-basic-component\\",
 })
 export class MyBasicComponent {
+  componentDidLoad() {}
+
   render() {
     return <input {...attrs} />;
   }
@@ -3542,6 +3891,8 @@ exports[`Stencil > jsx > Javascript Test > spreadNestedProps 1`] = `
 export class MyBasicComponent {
   @Prop() nested: any;
 
+  componentDidLoad() {}
+
   render() {
     return <input {...this.nested} />;
   }
@@ -3556,6 +3907,8 @@ exports[`Stencil > jsx > Javascript Test > spreadProps 1`] = `
   tag: \\"my-basic-component\\",
 })
 export class MyBasicComponent {
+  componentDidLoad() {}
+
   render() {
     return <input {...this} />;
   }
@@ -3580,6 +3933,8 @@ export class StringLiteralStore {
     return Promise.resolve();
   };
 
+  componentDidLoad() {}
+
   render() {
     return <div></div>;
   }
@@ -3596,6 +3951,8 @@ exports[`Stencil > jsx > Javascript Test > string-literal-store 1`] = `
 export class StringLiteralStore {
   @State() foo = 123;
 
+  componentDidLoad() {}
+
   render() {
     return <div>{this.foo}</div>;
   }
@@ -3618,6 +3975,8 @@ exports[`Stencil > jsx > Javascript Test > styleClassAndCss 1`] = `
 \`,
 })
 export class MyComponent {
+  componentDidLoad() {}
+
   render() {
     return (
       <div
@@ -3649,6 +4008,8 @@ exports[`Stencil > jsx > Javascript Test > stylePropClassAndCss 1`] = `
 export class StylePropClassAndCss {
   @Prop() attributes: any;
 
+  componentDidLoad() {}
+
   render() {
     return (
       <div
@@ -3670,6 +4031,8 @@ import { Component, h, Fragment } from \\"@stencil/core\\";
   tag: \\"sub-component\\",
 })
 export class SubComponent {
+  componentDidLoad() {}
+
   render() {
     return <foo></foo>;
   }
@@ -3684,6 +4047,8 @@ exports[`Stencil > jsx > Javascript Test > svgComponent 1`] = `
   tag: \\"svg-component\\",
 })
 export class SvgComponent {
+  componentDidLoad() {}
+
   render() {
     return (
       <svg
@@ -3723,6 +4088,8 @@ exports[`Stencil > jsx > Javascript Test > typeDependency 1`] = `
 export class TypeDependency {
   @Prop() foo: any;
 
+  componentDidLoad() {}
+
   render() {
     return <div>{this.foo}</div>;
   }
@@ -3739,6 +4106,8 @@ exports[`Stencil > jsx > Javascript Test > typeExternalStore 1`] = `
 export class TypeExternalStore {
   @State() _name = \\"test\\";
 
+  componentDidLoad() {}
+
   render() {
     return (
       <div>
@@ -3771,6 +4140,8 @@ export class TypeGetterStore {
     return \\"test\\";
   }
 
+  componentDidLoad() {}
+
   render() {
     return (
       <div>
@@ -3799,6 +4170,8 @@ exports[`Stencil > jsx > Javascript Test > use-style 1`] = `
 \`,
 })
 export class MyComponent {
+  componentDidLoad() {}
+
   render() {
     return <button type=\\"button\\">Button</button>;
   }
@@ -3825,6 +4198,8 @@ exports[`Stencil > jsx > Javascript Test > use-style-and-css 1`] = `
 \`,
 })
 export class MyComponent {
+  componentDidLoad() {}
+
   render() {
     return (
       <button class=\\"button\\" type=\\"button\\">
@@ -3852,6 +4227,8 @@ exports[`Stencil > jsx > Javascript Test > use-style-outside-component 1`] = `
 \`,
 })
 export class MyComponent {
+  componentDidLoad() {}
+
   render() {
     return <button type=\\"button\\">Button</button>;
   }
@@ -3895,6 +4272,8 @@ import { Component, h, Fragment } from \\"@stencil/core\\";
   tag: \\"my-basic-web-component\\",
 })
 export class MyBasicWebComponent {
+  componentDidLoad() {}
+
   render() {
     return (
       <swiper-container slides-per-view=\\"3\\" navigation=\\"true\\" pagination=\\"true\\">
@@ -3917,6 +4296,8 @@ exports[`Stencil > jsx > Remove Internal mitosis package 1`] = `
 export class MyBasicComponent {
   @State() name = \\"PatrickJS\\";
 
+  componentDidLoad() {}
+
   render() {
     return (
       <div>
@@ -3939,6 +4320,8 @@ export class MyBasicForShowComponent {
   @State() name = \\"PatrickJS\\";
   @State() names = [\\"Steve\\", \\"PatrickJS\\"];
 
+  componentDidLoad() {}
+
   render() {
     return (
       <main>
@@ -4028,6 +4411,8 @@ export class MyBasicRefComponent {
     return this.name.toLowerCase();
   };
 
+  componentDidLoad() {}
+
   componentDidUpdate() {
     console.log(\\"Received an update\\");
   }
@@ -4039,12 +4424,19 @@ export class MyBasicRefComponent {
           <Fragment>
             <input
               class=\\"input\\"
-              ref={(el) => (this.inputRef = el)}
+              ref={(el: any) => {
+                this.inputRef = el;
+              }}
               value={this.name}
               onBlur={(event) => this.onBlur()}
               onChange={(event) => (this.name = event.target.value)}
             />
-            <label for=\\"cars\\" ref={(el) => (this.inputNoArgRef = el)}>
+            <label
+              for=\\"cars\\"
+              ref={(el: any) => {
+                this.inputNoArgRef = el;
+              }}
+            >
               Choose a car:
             </label>
             <select name=\\"cars\\" id=\\"cars\\">
@@ -4092,6 +4484,8 @@ export class MyBasicComponent {
     return \\"bar\\";
   }
 
+  componentDidLoad() {}
+
   render() {
     return (
       <div class=\\"test div\\">
@@ -4117,6 +4511,8 @@ export class MyBasicForShowComponent {
   @State() name = \\"PatrickJS\\";
   @State() names = [\\"Steve\\", \\"PatrickJS\\"];
 
+  componentDidLoad() {}
+
   render() {
     return (
       <div>
@@ -4269,6 +4665,8 @@ exports[`Stencil > jsx > Typescript Test > BasicAttribute 1`] = `
   tag: \\"my-component\\",
 })
 export class MyComponent {
+  componentDidLoad() {}
+
   render() {
     return <input autocapitalize=\\"on\\" autocomplete=\\"on\\" spellcheck={true} />;
   }
@@ -4293,6 +4691,8 @@ export class MyBooleanAttribute {
   @Prop() children: Props[\\"children\\"];
   @Prop() type: Props[\\"type\\"];
 
+  componentDidLoad() {}
+
   render() {
     return (
       <div>
@@ -4331,6 +4731,8 @@ export class MyBasicChildComponent {
   @State() name = \\"Steve\\";
   @State() dev = \\"PatrickJS\\";
 
+  componentDidLoad() {}
+
   render() {
     return (
       <div>
@@ -4415,6 +4817,8 @@ export class MyBasicRefComponent {
     return this.name.toLowerCase();
   };
 
+  componentDidLoad() {}
+
   render() {
     return (
       <div>
@@ -4422,12 +4826,19 @@ export class MyBasicRefComponent {
           <Fragment>
             <input
               class=\\"input\\"
-              ref={(el) => (this.inputRef = el)}
+              ref={(el: any) => {
+                this.inputRef = el;
+              }}
               value={this.name}
               onBlur={(event) => this.onBlur()}
               onChange={(event) => (this.name = event.target.value)}
             />
-            <label for=\\"cars\\" ref={(el) => (this.inputNoArgRef = el)}>
+            <label
+              for=\\"cars\\"
+              ref={(el: any) => {
+                this.inputNoArgRef = el;
+              }}
+            >
               Choose a car:
             </label>
             <select name=\\"cars\\" id=\\"cars\\">
@@ -4465,6 +4876,8 @@ export class MyBasicRefAssignmentComponent {
     this.holdValueRef = this.holdValueRef + \\"JS\\";
   };
 
+  componentDidLoad() {}
+
   render() {
     return (
       <div>
@@ -4506,6 +4919,8 @@ export class MyPreviousComponent {
 
   @State() count = 0;
 
+  componentDidLoad() {}
+
   componentDidUpdate() {
     this.prevCount = this.count;
   }
@@ -4545,6 +4960,8 @@ export class Button {
   @Prop() openLinkInNewTab: ButtonProps[\\"openLinkInNewTab\\"];
   @Prop() text: ButtonProps[\\"text\\"];
 
+  componentDidLoad() {}
+
   render() {
     return (
       <div>
@@ -4633,6 +5050,8 @@ export class Column {
     return \`calc(\${this.getWidth(index)}% - \${subtractWidth}px)\`;
   }
 
+  componentDidLoad() {}
+
   render() {
     return (
       <div class=\\"builder-columns div\\">
@@ -4665,6 +5084,8 @@ type Props = {
 export class ContentSlotCode {
   @Prop() slotTesting: Props[\\"slotTesting\\"];
 
+  componentDidLoad() {}
+
   render() {
     return (
       <div>
@@ -4710,6 +5131,8 @@ export class ContentSlotJsxCode {
     this.slotContent ? 1 : \\"\\";
   }
 
+  componentDidLoad() {}
+
   render() {
     return (
       <Host>
@@ -4809,7 +5232,9 @@ export class CustomCode {
         class={
           \\"builder-custom-code\\" + (this.replaceNodes ? \\" replace-nodes\\" : \\"\\")
         }
-        ref={(el) => (this.elem = el)}
+        ref={(el: any) => {
+          this.elem = el;
+        }}
         innerHTML={this.code}
       ></div>
     );
@@ -4888,7 +5313,9 @@ export class CustomCode {
         class={
           \\"builder-custom-code\\" + (this.replaceNodes ? \\" replace-nodes\\" : \\"\\")
         }
-        ref={(el) => (this.elem = el)}
+        ref={(el: any) => {
+          this.elem = el;
+        }}
         innerHTML={this.code}
       ></div>
     );
@@ -5191,11 +5618,15 @@ export class FormComponent {
     }
   }
 
+  componentDidLoad() {}
+
   render() {
     return (
       <form
         validate={this.validate}
-        ref={(el) => (this.formRef = el)}
+        ref={(el: any) => {
+          this.formRef = el;
+        }}
         action={!this.sendWithJs && this.action}
         method={this.method}
         name={this.name}
@@ -5334,7 +5765,11 @@ export class Image {
   render() {
     return (
       <div>
-        <picture ref={(el) => (this.pictureRef = el)}>
+        <picture
+          ref={(el: any) => {
+            this.pictureRef = el;
+          }}
+        >
           {!this.useLazyLoading() || this.load ? (
             <img
               class={
@@ -5370,6 +5805,8 @@ export class ImgStateComponent {
   @State() canShow = true;
   @State() images = [\\"http://example.com/qwik.png\\"];
 
+  componentDidLoad() {}
+
   render() {
     return (
       <div>
@@ -5417,6 +5854,8 @@ export class ImgComponent {
   @Prop() imgSrc: ImgProps[\\"imgSrc\\"];
   @Prop() altText: ImgProps[\\"altText\\"];
 
+  componentDidLoad() {}
+
   render() {
     return (
       <img
@@ -5464,6 +5903,8 @@ export class FormInputComponent {
   @Prop() required: FormInputProps[\\"required\\"];
   @Event() onChange: any;
 
+  componentDidLoad() {}
+
   render() {
     return (
       <input
@@ -5500,6 +5941,8 @@ export class Stepper {
     console.log(value);
   }
 
+  componentDidLoad() {}
+
   render() {
     return (
       <form-input-component
@@ -5528,6 +5971,8 @@ export class NestedStore {
   @State() _id = \\"abc\\";
   @State() _messageId = this._id + \\"-message\\";
 
+  componentDidLoad() {}
+
   render() {
     return (
       <div id={this._id}>
@@ -5555,6 +6000,8 @@ export class RawText {
   @Prop() attributes: RawTextProps[\\"attributes\\"];
   @Prop() text: RawTextProps[\\"text\\"];
 
+  componentDidLoad() {}
+
   render() {
     return (
       <span
@@ -5584,6 +6031,8 @@ export class SectionComponent {
   @Prop() maxWidth: SectionProps[\\"maxWidth\\"];
   @Prop() children: SectionProps[\\"children\\"];
 
+  componentDidLoad() {}
+
   render() {
     return (
       <section
@@ -5622,6 +6071,8 @@ export class SectionStateComponent {
   @State() max = 42;
   @State() items = [42];
 
+  componentDidLoad() {}
+
   render() {
     return (
       <Host>
@@ -5670,6 +6121,8 @@ export class SelectComponent {
   @Prop() name: FormSelectProps[\\"name\\"];
   @Prop() options: FormSelectProps[\\"options\\"];
 
+  componentDidLoad() {}
+
   render() {
     return (
       <select
@@ -5706,6 +6159,8 @@ type Props = {
   tag: \\"slot-code\\",
 })
 export class SlotCode {
+  componentDidLoad() {}
+
   render() {
     return (
       <div>
@@ -5732,6 +6187,8 @@ type Props = {
   tag: \\"slot-code\\",
 })
 export class SlotCode {
+  componentDidLoad() {}
+
   render() {
     return (
       <div>
@@ -5758,6 +6215,8 @@ type Props = {
   tag: \\"slot-code\\",
 })
 export class SlotCode {
+  componentDidLoad() {}
+
   render() {
     return (
       <div>
@@ -5780,6 +6239,8 @@ type Props = {
   tag: \\"slot-code\\",
 })
 export class SlotCode {
+  componentDidLoad() {}
+
   render() {
     return (
       <div>
@@ -5915,6 +6376,8 @@ export class StringLiteralStore {
 
   bar() {}
 
+  componentDidLoad() {}
+
   render() {
     return <Fragment>{this.foo}</Fragment>;
   }
@@ -5935,6 +6398,8 @@ export class MyComponent {
     return errors;
   }
 
+  componentDidLoad() {}
+
   render() {
     return <Fragment>{this.foo(this.errors)}</Fragment>;
   }
@@ -5955,6 +6420,8 @@ export class MyComponent {
     return this.foo;
   }
 
+  componentDidLoad() {}
+
   render() {
     return <Fragment>{this.bar()}</Fragment>;
   }
@@ -5977,6 +6444,8 @@ export class SubmitButton {
   @Prop() attributes: ButtonProps[\\"attributes\\"];
   @Prop() text: ButtonProps[\\"text\\"];
 
+  componentDidLoad() {}
+
   render() {
     return (
       <button type=\\"submit\\" {...this.attributes}>
@@ -6009,6 +6478,8 @@ export class Text {
   @Prop() content: TextProps[\\"content\\"];
   @State() name = \\"Decadef20\\";
 
+  componentDidLoad() {}
+
   render() {
     return (
       <div
@@ -6050,6 +6521,8 @@ export class Textarea {
   @Prop() value: TextareaProps[\\"value\\"];
   @Prop() defaultValue: TextareaProps[\\"defaultValue\\"];
 
+  componentDidLoad() {}
+
   render() {
     return (
       <textarea
@@ -6093,6 +6566,8 @@ export class UseValueAndFnFromStore {
     }
   }
 
+  componentDidLoad() {}
+
   componentDidUpdate() {
     if (this._do) {
       this._do(this._id);
@@ -6149,6 +6624,8 @@ export class Video {
   @Prop() controls: VideoProps[\\"controls\\"];
   @Prop() loop: VideoProps[\\"loop\\"];
 
+  componentDidLoad() {}
+
   render() {
     return (
       <video
@@ -6193,6 +6670,8 @@ export class MyComponent {
     this.name = value;
   }
 
+  componentDidLoad() {}
+
   render() {
     return (
       <div>
@@ -6214,6 +6693,8 @@ exports[`Stencil > jsx > Typescript Test > basicForFragment 1`] = `
 export class BasicForFragment {
   @State() id = \\"xyz\\";
 
+  componentDidLoad() {}
+
   render() {
     return (
       <div>
@@ -6257,6 +6738,8 @@ export class MyBasicForNoTagRefComponent {
     return \\"span\\";
   }
 
+  componentDidLoad() {}
+
   render() {
     return (
       <this.TagNameGetter>
@@ -6296,12 +6779,16 @@ export class MyBasicForwardRefComponent {
   @Prop() inputRef: Props[\\"inputRef\\"];
   @State() name = \\"PatrickJS\\";
 
+  componentDidLoad() {}
+
   render() {
     return (
       <div>
         <input
           class=\\"input\\"
-          ref={(el) => (this.inputRef = el)}
+          ref={(el: any) => {
+            this.inputRef = el;
+          }}
           value={this.name}
           onChange={(event) => (this.name = event.target.value)}
         />
@@ -6338,12 +6825,16 @@ export class MyBasicForwardRefComponent {
   @Prop() inputRef: Props[\\"inputRef\\"];
   @State() name = \\"PatrickJS\\";
 
+  componentDidLoad() {}
+
   render() {
     return (
       <div>
         <input
           class=\\"input\\"
-          ref={(el) => (this.inputRef = el)}
+          ref={(el: any) => {
+            this.inputRef = el;
+          }}
           value={this.name}
           onChange={(event) => (this.name = event.target.value)}
         />
@@ -6363,6 +6854,8 @@ exports[`Stencil > jsx > Typescript Test > basicOnUpdateReturn 1`] = `
 export class MyBasicOnUpdateReturnComponent {
   @State() name = \\"PatrickJS\\";
 
+  componentDidLoad() {}
+
   componentDidUpdate() {
     const controller = new AbortController();
     const signal = controller.signal;
@@ -6392,6 +6885,162 @@ export class MyBasicOnUpdateReturnComponent {
 "
 `;
 
+exports[`Stencil > jsx > Typescript Test > basicRefAttributePassing 1`] = `
+"/**
+          useMetadata:
+          {\\"attributePassing\\":{\\"enabled\\":true}}
+          */
+
+import { Component, h, Fragment } from \\"@stencil/core\\";
+
+@Component({
+  tag: \\"basic-ref-attribute-passing-component\\",
+})
+export class BasicRefAttributePassingComponent {
+  private buttonRef!: HTMLButtonElement | null;
+  private _root!: HTMLElement;
+
+  /**
+   * Passes \`aria-*\`, \`data-*\` & \`class\` attributes to correct child. Used in angular and stencil.
+   * @param element  the ref for the component
+   * @param customElementSelector  the custom element like \`my-component\`
+   */
+  private enableAttributePassing(
+    element: HTMLElement | null,
+    customElementSelector: string
+  ) {
+    const parent = element?.closest(customElementSelector);
+    if (element && parent) {
+      const attributes = parent.attributes;
+      for (let i = 0; i < attributes.length; i++) {
+        const attr = attributes.item(i);
+        if (
+          attr &&
+          (attr.name.startsWith(\\"data-\\") || attr.name.startsWith(\\"aria-\\"))
+        ) {
+          element.setAttribute(attr.name, attr.value);
+          parent.removeAttribute(attr.name);
+        }
+        if (attr && attr.name === \\"class\\") {
+          const isWebComponent = attr.value.includes(\\"hydrated\\");
+          const value = attr.value.replace(\\"hydrated\\", \\"\\").trim();
+          const currentClass = element.getAttribute(\\"class\\");
+          element.setAttribute(
+            attr.name,
+            \`\${currentClass ? \`\${currentClass} \` : \\"\\"}\${value}\`
+          );
+          if (isWebComponent) {
+            // Stencil is using this class for lazy loading component
+            parent.setAttribute(\\"class\\", \\"hydrated\\");
+          } else {
+            parent.removeAttribute(attr.name);
+          }
+        }
+      }
+    }
+  }
+
+  componentDidLoad() {
+    this.enableAttributePassing(
+      this._root,
+      \\"basic-ref-attribute-passing-component\\"
+    );
+  }
+
+  render() {
+    return (
+      <button
+        ref={(el: any) => {
+          this._root = el;
+          this.buttonRef = el;
+        }}
+      >
+        Attribute Passing
+      </button>
+    );
+  }
+}
+"
+`;
+
+exports[`Stencil > jsx > Typescript Test > basicRefAttributePassingCustomRef 1`] = `
+"/**
+          useMetadata:
+          {\\"attributePassing\\":{\\"enabled\\":true,\\"customRef\\":\\"buttonRef\\"}}
+          */
+
+import { Component, h, Fragment } from \\"@stencil/core\\";
+
+@Component({
+  tag: \\"basic-ref-attribute-passing-custom-ref-component\\",
+})
+export class BasicRefAttributePassingCustomRefComponent {
+  private buttonRef!: HTMLButtonElement | null;
+
+  /**
+   * Passes \`aria-*\`, \`data-*\` & \`class\` attributes to correct child. Used in angular and stencil.
+   * @param element  the ref for the component
+   * @param customElementSelector  the custom element like \`my-component\`
+   */
+  private enableAttributePassing(
+    element: HTMLElement | null,
+    customElementSelector: string
+  ) {
+    const parent = element?.closest(customElementSelector);
+    if (element && parent) {
+      const attributes = parent.attributes;
+      for (let i = 0; i < attributes.length; i++) {
+        const attr = attributes.item(i);
+        if (
+          attr &&
+          (attr.name.startsWith(\\"data-\\") || attr.name.startsWith(\\"aria-\\"))
+        ) {
+          element.setAttribute(attr.name, attr.value);
+          parent.removeAttribute(attr.name);
+        }
+        if (attr && attr.name === \\"class\\") {
+          const isWebComponent = attr.value.includes(\\"hydrated\\");
+          const value = attr.value.replace(\\"hydrated\\", \\"\\").trim();
+          const currentClass = element.getAttribute(\\"class\\");
+          element.setAttribute(
+            attr.name,
+            \`\${currentClass ? \`\${currentClass} \` : \\"\\"}\${value}\`
+          );
+          if (isWebComponent) {
+            // Stencil is using this class for lazy loading component
+            parent.setAttribute(\\"class\\", \\"hydrated\\");
+          } else {
+            parent.removeAttribute(attr.name);
+          }
+        }
+      }
+    }
+  }
+
+  componentDidLoad() {
+    this.enableAttributePassing(
+      this.buttonRef,
+      \\"basic-ref-attribute-passing-custom-ref-component\\"
+    );
+  }
+
+  render() {
+    return (
+      <div>
+        <button
+          ref={(el: any) => {
+            this.buttonRef = el;
+          }}
+        >
+          Attribute Passing
+        </button>
+      </div>
+    );
+  }
+}
+"
+`;
+
 exports[`Stencil > jsx > Typescript Test > class + ClassName + css 1`] = `
 "import { MyComp } from \\"./my-component.lite\\";
 
@@ -6407,6 +7056,8 @@ import { Component, h, Fragment } from \\"@stencil/core\\";
 \`,
 })
 export class MyBasicComponent {
+  componentDidLoad() {}
+
   render() {
     return (
       <div>
@@ -6436,6 +7087,8 @@ exports[`Stencil > jsx > Typescript Test > class + css 1`] = `
 \`,
 })
 export class MyBasicComponent {
+  componentDidLoad() {}
+
   render() {
     return (
       <div class=\\"test div\\">
@@ -6460,6 +7113,8 @@ exports[`Stencil > jsx > Typescript Test > className + css 1`] = `
 \`,
 })
 export class MyBasicComponent {
+  componentDidLoad() {}
+
   render() {
     return (
       <div class=\\"test div\\">
@@ -6487,6 +7142,8 @@ type Props = {
 export class ClassNameCode {
   @State() bindings = \\"a binding\\";
 
+  componentDidLoad() {}
+
   render() {
     return (
       <div>
@@ -6517,6 +7174,8 @@ export class MyBasicComponent {
     color: \\"red\\",
   };
 
+  componentDidLoad() {}
+
   render() {
     return (
       <div class={this.classState + \\" div\\"} style={this.styleState}>
@@ -6540,6 +7199,8 @@ import { Component, h, Fragment } from \\"@stencil/core\\";
   tag: \\"complex-meta-raw\\",
 })
 export class ComplexMetaRaw {
+  componentDidLoad() {}
+
   render() {
     return <div></div>;
   }
@@ -6563,6 +7224,8 @@ export interface ComponentWithContextProps {
 export class ComponentWithContext {
   @Prop() content: ComponentWithContextProps[\\"content\\"];
 
+  componentDidLoad() {}
+
   render() {
     return (
       <Fragment>
@@ -6590,6 +7253,8 @@ export interface ComponentWithContextProps {
 export class ComponentWithContext {
   @Prop() content: ComponentWithContextProps[\\"content\\"];
 
+  componentDidLoad() {}
+
   render() {
     return (
       <Fragment>
@@ -6614,6 +7279,8 @@ export class RenderContent {
   @Prop() content: any;
   @Prop() customComponents: any;
 
+  componentDidLoad() {}
+
   render() {
     return <div>setting context</div>;
   }
@@ -6647,6 +7314,8 @@ export class Button {
   };
   @Prop() buttonText: ButtonProps[\\"buttonText\\"];
 
+  componentDidLoad() {}
+
   render() {
     return (
       <div>
@@ -6696,6 +7365,8 @@ export class Button {
   @Prop() text: ButtonProps[\\"text\\"] = \\"default text\\";
   @Event() onClick: any = () => {};
 
+  componentDidLoad() {}
+
   render() {
     return (
       <div>
@@ -6741,6 +7412,8 @@ type Props = {
 export class ComponentWithTypes {
   @Prop() name: Props[\\"name\\"];
 
+  componentDidLoad() {}
+
   render() {
     return (
       <div>
@@ -6769,6 +7442,8 @@ exports[`Stencil > jsx > Typescript Test > eventInputAndChange 1`] = `
 export class EventInputAndChange {
   @State() name = \\"Steve\\";
 
+  componentDidLoad() {}
+
   render() {
     return (
       <div>
@@ -6798,6 +7473,8 @@ export class MyComponent {
     ? this.componentRef
     : null;
 
+  componentDidLoad() {}
+
   render() {
     return <div>{this.refToUse}</div>;
   }
@@ -6823,6 +7500,8 @@ export class FigmaButton {
   @Prop() size: any;
   @Prop() label: any;
 
+  componentDidLoad() {}
+
   render() {
     return (
       <button
@@ -6862,6 +7541,8 @@ export class Button {
     return i + this.foo2.length;
   }
 
+  componentDidLoad() {}
+
   render() {
     return (
       <div>
@@ -6900,6 +7581,8 @@ export class RenderContent {
     };
   }
 
+  componentDidLoad() {}
+
   render() {
     return (
       <render-block
@@ -6918,6 +7601,8 @@ exports[`Stencil > jsx > Typescript Test > multipleOnUpdate 1`] = `
   tag: \\"multiple-on-update\\",
 })
 export class MultipleOnUpdate {
+  componentDidLoad() {}
+
   componentDidUpdate() {
     console.log(\\"Runs on every update/rerender\\");
     console.log(\\"Runs on every update/rerender as well\\");
@@ -6942,6 +7627,8 @@ export class MultipleOnUpdateWithDeps {
   @State() c = \\"c\\";
   @State() d = \\"d\\";
 
+  componentDidLoad() {}
+
   componentDidUpdate() {
     console.log(\\"Runs when a or b changes\\", this.a, this.b);
 
@@ -6973,6 +7660,8 @@ export class MyBasicComponent {
     hello: \\"world\\",
   };
 
+  componentDidLoad() {}
+
   render() {
     return <input {...this.attrs} {...this} />;
   }
@@ -7015,6 +7704,8 @@ exports[`Stencil > jsx > Typescript Test > nestedStyles 1`] = `
 \`,
 })
 export class NestedStyles {
+  componentDidLoad() {}
+
   render() {
     return <div class=\\"div\\">Hello world</div>;
   }
@@ -7041,7 +7732,12 @@ export class Embed {
 
   render() {
     return (
-      <div class=\\"builder-embed\\" ref={(el) => (this.elem = el)}>
+      <div
+        class=\\"builder-embed\\"
+        ref={(el: any) => {
+          this.elem = el;
+        }}
+      >
         <div>Test</div>
       </div>
     );
@@ -7086,6 +7782,8 @@ export class OnInit {
   @Prop() name: Props[\\"name\\"];
   @State() name = \\"\\";
 
+  componentDidLoad() {}
+
   render() {
     return (
       <div>
@@ -7105,6 +7803,8 @@ exports[`Stencil > jsx > Typescript Test > onInitPlain 1`] = `
   tag: \\"on-init-plain\\",
 })
 export class OnInitPlain {
+  componentDidLoad() {}
+
   render() {
     return <div></div>;
   }
@@ -7169,6 +7869,8 @@ exports[`Stencil > jsx > Typescript Test > onUpdate 1`] = `
   tag: \\"on-update\\",
 })
 export class OnUpdate {
+  componentDidLoad() {}
+
   componentDidUpdate() {
     console.log(\\"Runs on every update/rerender\\");
   }
@@ -7195,6 +7897,8 @@ export class OnUpdateWithDeps {
   @State() a = \\"a\\";
   @State() b = \\"b\\";
 
+  componentDidLoad() {}
+
   componentDidUpdate() {
     console.log(\\"Runs when a, b or size changes\\", this.a, this.b, this.size);
   }
@@ -7229,6 +7933,8 @@ export interface MyBasicComponentProps {
   tag: \\"my-basic-component\\",
 })
 export class MyBasicComponent {
+  componentDidLoad() {}
+
   render() {
     return <div></div>;
   }
@@ -7258,6 +7964,8 @@ export interface MyBasicComponentProps {
 export class MyBasicComponent {
   @Prop() name: MyBasicComponentProps[\\"name\\"];
 
+  componentDidLoad() {}
+
   render() {
     return (
       <div>
@@ -7286,6 +7994,8 @@ export class MyBasicComponent {
   @Prop() type: Props[\\"type\\"];
   @State() name = \\"Decadef20\\";
 
+  componentDidLoad() {}
+
   render() {
     return (
       <div>
@@ -7313,6 +8023,8 @@ interface Person {
 export class MyBasicComponent {
   @Prop() name: Person | never[\\"name\\"];
 
+  componentDidLoad() {}
+
   render() {
     return (
       <div>
@@ -7339,6 +8051,8 @@ type Person = {
 export class MyBasicComponent {
   @Prop() name: Person[\\"name\\"];
 
+  componentDidLoad() {}
+
   render() {
     return (
       <div>
@@ -7366,6 +8080,8 @@ export class OnUpdate {
     };
   };
 
+  componentDidLoad() {}
+
   componentDidUpdate() {
     this.foo({
       someOption: this.bar,
@@ -7590,6 +8306,8 @@ export class RenderBlock {
     }
   }
 
+  componentDidLoad() {}
+
   render() {
     return (
       <Host>
@@ -7712,6 +8430,8 @@ export class Button {
   @Prop() openLinkInNewTab: ButtonProps[\\"openLinkInNewTab\\"];
   @Prop() text: ButtonProps[\\"text\\"];
 
+  componentDidLoad() {}
+
   render() {
     return (
       <Fragment>
@@ -7745,6 +8465,8 @@ exports[`Stencil > jsx > Typescript Test > self-referencing component 1`] = `
 export class MyComponent {
   @Prop() name: any;
 
+  componentDidLoad() {}
+
   render() {
     return (
       <div>
@@ -7769,6 +8491,8 @@ export class MyComponent {
   @Prop() name: any;
   @Prop() children: any;
 
+  componentDidLoad() {}
+
   render() {
     return (
       <div>
@@ -7799,6 +8523,8 @@ export class SetState {
     this.n[0] = \\"123\\";
   }
 
+  componentDidLoad() {}
+
   render() {
     return (
       <div>
@@ -7835,6 +8561,8 @@ export class MyBasicComponent {
   @Prop() id: Props[\\"id\\"];
   @Prop() foo: Props[\\"foo\\"];
 
+  componentDidLoad() {}
+
   componentDidUpdate() {
     console.log(\\"props.id changed\\", this.id);
     console.log(\\"props.foo.value.bar.baz changed\\", this.foo.bar.baz);
@@ -7859,6 +8587,8 @@ exports[`Stencil > jsx > Typescript Test > spreadAttrs 1`] = `
   tag: \\"my-basic-component\\",
 })
 export class MyBasicComponent {
+  componentDidLoad() {}
+
   render() {
     return <input {...attrs} />;
   }
@@ -7875,6 +8605,8 @@ exports[`Stencil > jsx > Typescript Test > spreadNestedProps 1`] = `
 export class MyBasicComponent {
   @Prop() nested: any;
 
+  componentDidLoad() {}
+
   render() {
     return <input {...this.nested} />;
   }
@@ -7889,6 +8621,8 @@ exports[`Stencil > jsx > Typescript Test > spreadProps 1`] = `
   tag: \\"my-basic-component\\",
 })
 export class MyBasicComponent {
+  componentDidLoad() {}
+
   render() {
     return <input {...this} />;
   }
@@ -7913,6 +8647,8 @@ export class StringLiteralStore {
     return Promise.resolve();
   };
 
+  componentDidLoad() {}
+
   render() {
     return <div></div>;
   }
@@ -7929,6 +8665,8 @@ exports[`Stencil > jsx > Typescript Test > string-literal-store 1`] = `
 export class StringLiteralStore {
   @State() foo = 123;
 
+  componentDidLoad() {}
+
   render() {
     return <div>{this.foo}</div>;
   }
@@ -7951,6 +8689,8 @@ exports[`Stencil > jsx > Typescript Test > styleClassAndCss 1`] = `
 \`,
 })
 export class MyComponent {
+  componentDidLoad() {}
+
   render() {
     return (
       <div
@@ -7982,6 +8722,8 @@ exports[`Stencil > jsx > Typescript Test > stylePropClassAndCss 1`] = `
 export class StylePropClassAndCss {
   @Prop() attributes: any;
 
+  componentDidLoad() {}
+
   render() {
     return (
       <div
@@ -8003,6 +8745,8 @@ import { Component, h, Fragment } from \\"@stencil/core\\";
   tag: \\"sub-component\\",
 })
 export class SubComponent {
+  componentDidLoad() {}
+
   render() {
     return <foo></foo>;
   }
@@ -8017,6 +8761,8 @@ exports[`Stencil > jsx > Typescript Test > svgComponent 1`] = `
   tag: \\"svg-component\\",
 })
 export class SvgComponent {
+  componentDidLoad() {}
+
   render() {
     return (
       <svg
@@ -8064,6 +8810,8 @@ export type TypeDependencyProps = {
 export class TypeDependency {
   @Prop() foo: TypeDependencyProps[\\"foo\\"];
 
+  componentDidLoad() {}
+
   render() {
     return <div>{this.foo}</div>;
   }
@@ -8082,6 +8830,8 @@ import { Component, h, Fragment, State } from \\"@stencil/core\\";
 export class TypeExternalStore {
   @State() _name = \\"test\\";
 
+  componentDidLoad() {}
+
   render() {
     return (
       <div>
@@ -8120,6 +8870,8 @@ export class TypeGetterStore {
     return \\"test\\";
   }
 
+  componentDidLoad() {}
+
   render() {
     return (
       <div>
@@ -8148,6 +8900,8 @@ exports[`Stencil > jsx > Typescript Test > use-style 1`] = `
 \`,
 })
 export class MyComponent {
+  componentDidLoad() {}
+
   render() {
     return <button type=\\"button\\">Button</button>;
   }
@@ -8174,6 +8928,8 @@ exports[`Stencil > jsx > Typescript Test > use-style-and-css 1`] = `
 \`,
 })
 export class MyComponent {
+  componentDidLoad() {}
+
   render() {
     return (
       <button class=\\"button\\" type=\\"button\\">
@@ -8201,6 +8957,8 @@ exports[`Stencil > jsx > Typescript Test > use-style-outside-component 1`] = `
 \`,
 })
 export class MyComponent {
+  componentDidLoad() {}
+
   render() {
     return <button type=\\"button\\">Button</button>;
   }
@@ -8244,6 +9002,8 @@ import { Component, h, Fragment } from \\"@stencil/core\\";
   tag: \\"my-basic-web-component\\",
 })
 export class MyBasicWebComponent {
+  componentDidLoad() {}
+
   render() {
     return (
       <swiper-container slides-per-view=\\"3\\" navigation=\\"true\\" pagination=\\"true\\">
@@ -8266,6 +9026,8 @@ exports[`Stencil > svelte > Javascript Test > basic 1`] = `
 export class MyComponent {
   @State() name = \\"Steve\\";
 
+  componentDidLoad() {}
+
   render() {
     return (
       <div>
@@ -8291,6 +9053,8 @@ export class MyComponent {
   @State() tortilla = \\"Plain\\";
   @State() fillings = [];
 
+  componentDidLoad() {}
+
   render() {
     return (
       <div>
@@ -8362,6 +9126,8 @@ exports[`Stencil > svelte > Javascript Test > bindProperty 1`] = `
 export class MyComponent {
   @State() value = \\"hello\\";
 
+  componentDidLoad() {}
+
   render() {
     return <input value={this.value} />;
   }
@@ -8379,6 +9145,8 @@ export class MyComponent {
   @Prop() disabled: any;
   @State() focus = true;
 
+  componentDidLoad() {}
+
   render() {
     return (
       <input
@@ -8401,6 +9169,8 @@ exports[`Stencil > svelte > Javascript Test > context 1`] = `
 export class MyComponent {
   @State() activeTab = 0;
 
+  componentDidLoad() {}
+
   render() {
     return <div>{this.activeTab}</div>;
   }
@@ -8417,6 +9187,8 @@ exports[`Stencil > svelte > Javascript Test > each 1`] = `
 export class MyComponent {
   @State() numbers = [\\"one\\", \\"two\\", \\"three\\"];
 
+  componentDidLoad() {}
+
   render() {
     return (
       <ul>
@@ -8441,6 +9213,8 @@ export class MyComponent {
     console.log(msg);
   };
 
+  componentDidLoad() {}
+
   render() {
     return (
       <div>
@@ -8463,6 +9237,8 @@ exports[`Stencil > svelte > Javascript Test > html 1`] = `
 export class MyComponent {
   @State() html = \\"<b>bold</b>\\";
 
+  componentDidLoad() {}
+
   render() {
     return <div innerHTML={this.html}></div>;
   }
@@ -8483,6 +9259,8 @@ export class MyComponent {
     this.show = !this.show;
   };
 
+  componentDidLoad() {}
+
   render() {
     return (
       <Host>
@@ -8509,6 +9287,8 @@ import { Component, h, Fragment, State } from \\"@stencil/core\\";
 export class MyComponent {
   @State() disabled = false;
 
+  componentDidLoad() {}
+
   render() {
     return (
       <div>
@@ -8559,6 +9339,8 @@ export class MyComponent {
     return this.name.toLowerCase();
   }
 
+  componentDidLoad() {}
+
   render() {
     return (
       <div>
@@ -8587,6 +9369,8 @@ export class MyComponent {
     this.result = a_ * b_;
   };
 
+  componentDidLoad() {}
+
   componentDidUpdate() {
     this.calculateResult(this.a, this.b);
   }
@@ -8620,6 +9404,8 @@ exports[`Stencil > svelte > Javascript Test > slots 1`] = `
   tag: \\"my-component\\",
 })
 export class MyComponent {
+  componentDidLoad() {}
+
   render() {
     return (
       <div>
@@ -8652,6 +9438,8 @@ exports[`Stencil > svelte > Javascript Test > style 1`] = `
 \`,
 })
 export class MyComponent {
+  componentDidLoad() {}
+
   render() {
     return <input class=\\"form-input\\" />;
   }
@@ -8669,6 +9457,8 @@ export class MyComponent {
   @State() a = 5;
   @State() b = 12;
 
+  componentDidLoad() {}
+
   render() {
     return (
       <div>
@@ -8693,6 +9483,8 @@ exports[`Stencil > svelte > Typescript Test > basic 1`] = `
 export class MyComponent {
   @State() name = \\"Steve\\";
 
+  componentDidLoad() {}
+
   render() {
     return (
       <div>
@@ -8718,6 +9510,8 @@ export class MyComponent {
   @State() tortilla = \\"Plain\\";
   @State() fillings = [];
 
+  componentDidLoad() {}
+
   render() {
     return (
       <div>
@@ -8789,6 +9583,8 @@ exports[`Stencil > svelte > Typescript Test > bindProperty 1`] = `
 export class MyComponent {
   @State() value = \\"hello\\";
 
+  componentDidLoad() {}
+
   render() {
     return <input value={this.value} />;
   }
@@ -8806,6 +9602,8 @@ export class MyComponent {
   @Prop() disabled: any;
   @State() focus = true;
 
+  componentDidLoad() {}
+
   render() {
     return (
       <input
@@ -8828,6 +9626,8 @@ exports[`Stencil > svelte > Typescript Test > context 1`] = `
 export class MyComponent {
   @State() activeTab = 0;
 
+  componentDidLoad() {}
+
   render() {
     return <div>{this.activeTab}</div>;
   }
@@ -8844,6 +9644,8 @@ exports[`Stencil > svelte > Typescript Test > each 1`] = `
 export class MyComponent {
   @State() numbers = [\\"one\\", \\"two\\", \\"three\\"];
 
+  componentDidLoad() {}
+
   render() {
     return (
       <ul>
@@ -8868,6 +9670,8 @@ export class MyComponent {
     console.log(msg);
   };
 
+  componentDidLoad() {}
+
   render() {
     return (
       <div>
@@ -8890,6 +9694,8 @@ exports[`Stencil > svelte > Typescript Test > html 1`] = `
 export class MyComponent {
   @State() html = \\"<b>bold</b>\\";
 
+  componentDidLoad() {}
+
   render() {
     return <div innerHTML={this.html}></div>;
   }
@@ -8910,6 +9716,8 @@ export class MyComponent {
     this.show = !this.show;
   };
 
+  componentDidLoad() {}
+
   render() {
     return (
       <Host>
@@ -8936,6 +9744,8 @@ import { Component, h, Fragment, State } from \\"@stencil/core\\";
 export class MyComponent {
   @State() disabled = false;
 
+  componentDidLoad() {}
+
   render() {
     return (
       <div>
@@ -8986,6 +9796,8 @@ export class MyComponent {
     return this.name.toLowerCase();
   }
 
+  componentDidLoad() {}
+
   render() {
     return (
       <div>
@@ -9014,6 +9826,8 @@ export class MyComponent {
     this.result = a_ * b_;
   };
 
+  componentDidLoad() {}
+
   componentDidUpdate() {
     this.calculateResult(this.a, this.b);
   }
@@ -9047,6 +9861,8 @@ exports[`Stencil > svelte > Typescript Test > slots 1`] = `
   tag: \\"my-component\\",
 })
 export class MyComponent {
+  componentDidLoad() {}
+
   render() {
     return (
       <div>
@@ -9079,6 +9895,8 @@ exports[`Stencil > svelte > Typescript Test > style 1`] = `
 \`,
 })
 export class MyComponent {
+  componentDidLoad() {}
+
   render() {
     return <input class=\\"form-input\\" />;
   }
@@ -9096,6 +9914,8 @@ export class MyComponent {
   @State() a = 5;
   @State() b = 12;
 
+  componentDidLoad() {}
+
   render() {
     return (
       <div>
diff --git a/packages/core/src/__tests__/__snapshots__/svelte.test.ts.snap b/packages/core/src/__tests__/__snapshots__/svelte.test.ts.snap
index b9aa7e2401..cace9f6825 100644
--- a/packages/core/src/__tests__/__snapshots__/svelte.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/svelte.test.ts.snap
@@ -1727,6 +1727,88 @@ exports[`Svelte > jsx > Javascript Test > basicOnUpdateReturn 1`] = `
 <div>Hello! {name}</div>"
 `;
 
+exports[`Svelte > jsx > Javascript Test > basicRefAttributePassing 1`] = `
+"/**
+          useMetadata:
+          {\\"attributePassing\\":{\\"enabled\\":true}}
+          */
+          
+          <script >
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+  let buttonRef
+
+
+
+
+
+
+
+
+
+
+
+</script>
+
+<button  bind:this={buttonRef} >Attribute Passing</button>"
+`;
+
+exports[`Svelte > jsx > Javascript Test > basicRefAttributePassingCustomRef 1`] = `
+"/**
+          useMetadata:
+          {\\"attributePassing\\":{\\"enabled\\":true,\\"customRef\\":\\"buttonRef\\"}}
+          */
+          
+          <script >
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+  let buttonRef
+
+
+
+
+
+
+
+
+
+
+
+</script>
+
+<div ><button  bind:this={buttonRef} >Attribute Passing</button></div>"
+`;
+
 exports[`Svelte > jsx > Javascript Test > class + ClassName + css 1`] = `
 "<script>
   import MyComp from \\"./my-component.svelte\\";
@@ -5311,6 +5393,88 @@ exports[`Svelte > jsx > Typescript Test > basicOnUpdateReturn 1`] = `
 <div>Hello! {name}</div>"
 `;
 
+exports[`Svelte > jsx > Typescript Test > basicRefAttributePassing 1`] = `
+"/**
+          useMetadata:
+          {\\"attributePassing\\":{\\"enabled\\":true}}
+          */
+          
+          <script lang='ts'>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+  let buttonRef
+
+
+
+
+
+
+
+
+
+
+
+</script>
+
+<button  bind:this={buttonRef} >Attribute Passing</button>"
+`;
+
+exports[`Svelte > jsx > Typescript Test > basicRefAttributePassingCustomRef 1`] = `
+"/**
+          useMetadata:
+          {\\"attributePassing\\":{\\"enabled\\":true,\\"customRef\\":\\"buttonRef\\"}}
+          */
+          
+          <script lang='ts'>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+  let buttonRef
+
+
+
+
+
+
+
+
+
+
+
+</script>
+
+<div ><button  bind:this={buttonRef} >Attribute Passing</button></div>"
+`;
+
 exports[`Svelte > jsx > Typescript Test > class + ClassName + css 1`] = `
 "<script lang=\\"ts\\">
   import MyComp from \\"./my-component.svelte\\";
diff --git a/packages/core/src/__tests__/__snapshots__/taro.test.ts.snap b/packages/core/src/__tests__/__snapshots__/taro.test.ts.snap
index 4b6a40dffd..993dc2a6dc 100644
--- a/packages/core/src/__tests__/__snapshots__/taro.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/taro.test.ts.snap
@@ -1863,6 +1863,52 @@ export default MyBasicOnUpdateReturnComponent;
 "
 `;
 
+exports[`Taro > jsx > Javascript Test > basicRefAttributePassing 1`] = `
+"/**
+          useMetadata:
+          {\\"attributePassing\\":{\\"enabled\\":true}}
+          */
+
+\\"use client\\";
+import * as React from \\"react\\";
+import { useRef } from \\"react\\";
+import { Button, View, Text } from \\"@tarojs/components\\";
+
+function BasicRefAttributePassingComponent(props) {
+  const buttonRef = useRef(null);
+
+  return <Button ref={buttonRef}>Attribute Passing</Button>;
+}
+
+export default BasicRefAttributePassingComponent;
+"
+`;
+
+exports[`Taro > jsx > Javascript Test > basicRefAttributePassingCustomRef 1`] = `
+"/**
+          useMetadata:
+          {\\"attributePassing\\":{\\"enabled\\":true,\\"customRef\\":\\"buttonRef\\"}}
+          */
+
+\\"use client\\";
+import * as React from \\"react\\";
+import { useRef } from \\"react\\";
+import { View, Button, Text } from \\"@tarojs/components\\";
+
+function BasicRefAttributePassingCustomRefComponent(props) {
+  const buttonRef = useRef(null);
+
+  return (
+    <View>
+      <Button ref={buttonRef}>Attribute Passing</Button>
+    </View>
+  );
+}
+
+export default BasicRefAttributePassingCustomRefComponent;
+"
+`;
+
 exports[`Taro > jsx > Javascript Test > class + ClassName + css 1`] = `
 "import * as React from \\"react\\";
 import MyComp from \\"./my-component\\";
@@ -5881,6 +5927,52 @@ export default MyBasicOnUpdateReturnComponent;
 "
 `;
 
+exports[`Taro > jsx > Typescript Test > basicRefAttributePassing 1`] = `
+"/**
+          useMetadata:
+          {\\"attributePassing\\":{\\"enabled\\":true}}
+          */
+
+\\"use client\\";
+import * as React from \\"react\\";
+import { useRef } from \\"react\\";
+import { Button, View, Text } from \\"@tarojs/components\\";
+
+function BasicRefAttributePassingComponent(props: any) {
+  const buttonRef = useRef<HTMLButtonElement | null>(null);
+
+  return <Button ref={buttonRef}>Attribute Passing</Button>;
+}
+
+export default BasicRefAttributePassingComponent;
+"
+`;
+
+exports[`Taro > jsx > Typescript Test > basicRefAttributePassingCustomRef 1`] = `
+"/**
+          useMetadata:
+          {\\"attributePassing\\":{\\"enabled\\":true,\\"customRef\\":\\"buttonRef\\"}}
+          */
+
+\\"use client\\";
+import * as React from \\"react\\";
+import { useRef } from \\"react\\";
+import { View, Button, Text } from \\"@tarojs/components\\";
+
+function BasicRefAttributePassingCustomRefComponent(props: any) {
+  const buttonRef = useRef<HTMLButtonElement | null>(null);
+
+  return (
+    <View>
+      <Button ref={buttonRef}>Attribute Passing</Button>
+    </View>
+  );
+}
+
+export default BasicRefAttributePassingCustomRefComponent;
+"
+`;
+
 exports[`Taro > jsx > Typescript Test > class + ClassName + css 1`] = `
 "import * as React from \\"react\\";
 import MyComp from \\"./my-component\\";
diff --git a/packages/core/src/__tests__/__snapshots__/vue-composition.test.ts.snap b/packages/core/src/__tests__/__snapshots__/vue-composition.test.ts.snap
index 8e001ee85b..a8d74b6dd0 100644
--- a/packages/core/src/__tests__/__snapshots__/vue-composition.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/vue-composition.test.ts.snap
@@ -1814,6 +1814,35 @@ watch(
 </script>"
 `;
 
+exports[`Vue > jsx > Javascript Test > basicRefAttributePassing 1`] = `
+"/** useMetadata: {\\"attributePassing\\":{\\"enabled\\":true}} */
+
+<template>
+  <button ref=\\"buttonRef\\">Attribute Passing</button>
+</template>
+
+<script setup>
+import { ref } from \\"vue\\";
+
+const buttonRef = ref(null);
+</script>"
+`;
+
+exports[`Vue > jsx > Javascript Test > basicRefAttributePassingCustomRef 1`] = `
+"/** useMetadata: {\\"attributePassing\\":{\\"enabled\\":true,\\"customRef\\":\\"buttonRef\\"}}
+*/
+
+<template>
+  <div><button ref=\\"buttonRef\\">Attribute Passing</button></div>
+</template>
+
+<script setup>
+import { ref } from \\"vue\\";
+
+const buttonRef = ref(null);
+</script>"
+`;
+
 exports[`Vue > jsx > Javascript Test > class + ClassName + css 1`] = `
 "<template>
   <div>
@@ -5436,6 +5465,35 @@ watch(
 </script>"
 `;
 
+exports[`Vue > jsx > Typescript Test > basicRefAttributePassing 1`] = `
+"/** useMetadata: {\\"attributePassing\\":{\\"enabled\\":true}} */
+
+<template>
+  <button ref=\\"buttonRef\\">Attribute Passing</button>
+</template>
+
+<script setup lang=\\"ts\\">
+import { ref } from \\"vue\\";
+
+const buttonRef = ref<HTMLButtonElement | null>(null);
+</script>"
+`;
+
+exports[`Vue > jsx > Typescript Test > basicRefAttributePassingCustomRef 1`] = `
+"/** useMetadata: {\\"attributePassing\\":{\\"enabled\\":true,\\"customRef\\":\\"buttonRef\\"}}
+*/
+
+<template>
+  <div><button ref=\\"buttonRef\\">Attribute Passing</button></div>
+</template>
+
+<script setup lang=\\"ts\\">
+import { ref } from \\"vue\\";
+
+const buttonRef = ref<HTMLButtonElement | null>(null);
+</script>"
+`;
+
 exports[`Vue > jsx > Typescript Test > class + ClassName + css 1`] = `
 "<template>
   <div>
diff --git a/packages/core/src/__tests__/__snapshots__/vue.test.ts.snap b/packages/core/src/__tests__/__snapshots__/vue.test.ts.snap
index 05c3a9c3ca..d3a38ef30f 100644
--- a/packages/core/src/__tests__/__snapshots__/vue.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/vue.test.ts.snap
@@ -2149,6 +2149,39 @@ export default defineComponent({
 </script>"
 `;
 
+exports[`Vue > jsx > Javascript Test > basicRefAttributePassing 1`] = `
+"/** useMetadata: {\\"attributePassing\\":{\\"enabled\\":true}} */
+
+<template>
+  <button ref=\\"buttonRef\\">Attribute Passing</button>
+</template>
+
+<script>
+import { defineComponent } from \\"vue\\";
+
+export default defineComponent({
+  name: \\"basic-ref-attribute-passing-component\\",
+});
+</script>"
+`;
+
+exports[`Vue > jsx > Javascript Test > basicRefAttributePassingCustomRef 1`] = `
+"/** useMetadata: {\\"attributePassing\\":{\\"enabled\\":true,\\"customRef\\":\\"buttonRef\\"}}
+*/
+
+<template>
+  <div><button ref=\\"buttonRef\\">Attribute Passing</button></div>
+</template>
+
+<script>
+import { defineComponent } from \\"vue\\";
+
+export default defineComponent({
+  name: \\"basic-ref-attribute-passing-custom-ref-component\\",
+});
+</script>"
+`;
+
 exports[`Vue > jsx > Javascript Test > class + ClassName + css 1`] = `
 "<template>
   <div>
@@ -6688,6 +6721,39 @@ export default defineComponent({
 </script>"
 `;
 
+exports[`Vue > jsx > Typescript Test > basicRefAttributePassing 1`] = `
+"/** useMetadata: {\\"attributePassing\\":{\\"enabled\\":true}} */
+
+<template>
+  <button ref=\\"buttonRef\\">Attribute Passing</button>
+</template>
+
+<script lang=\\"ts\\">
+import { defineComponent } from \\"vue\\";
+
+export default defineComponent({
+  name: \\"basic-ref-attribute-passing-component\\",
+});
+</script>"
+`;
+
+exports[`Vue > jsx > Typescript Test > basicRefAttributePassingCustomRef 1`] = `
+"/** useMetadata: {\\"attributePassing\\":{\\"enabled\\":true,\\"customRef\\":\\"buttonRef\\"}}
+*/
+
+<template>
+  <div><button ref=\\"buttonRef\\">Attribute Passing</button></div>
+</template>
+
+<script lang=\\"ts\\">
+import { defineComponent } from \\"vue\\";
+
+export default defineComponent({
+  name: \\"basic-ref-attribute-passing-custom-ref-component\\",
+});
+</script>"
+`;
+
 exports[`Vue > jsx > Typescript Test > class + ClassName + css 1`] = `
 "<template>
   <div>
diff --git a/packages/core/src/__tests__/__snapshots__/webcomponent.test.ts.snap b/packages/core/src/__tests__/__snapshots__/webcomponent.test.ts.snap
index 1e28e23eff..2338330f53 100644
--- a/packages/core/src/__tests__/__snapshots__/webcomponent.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/webcomponent.test.ts.snap
@@ -8590,6 +8590,222 @@ customElements.define(
 "
 `;
 
+exports[`webcomponent > jsx > Javascript Test > basicRefAttributePassing 1`] = `
+"/**
+          useMetadata:
+          {\\"attributePassing\\":{\\"enabled\\":true}}
+          */
+
+/**
+ * Usage:
+ *
+ *  <basic-ref-attribute-passing-component></basic-ref-attribute-passing-component>
+ *
+ */
+class BasicRefAttributePassingComponent extends HTMLElement {
+  get _buttonRef() {
+    return this._root.querySelector(
+      \\"[data-ref='BasicRefAttributePassingComponent-buttonRef']\\"
+    );
+  }
+
+  get _root() {
+    return this.shadowRoot || this;
+  }
+
+  constructor() {
+    super();
+    const self = this;
+
+    this.state = {};
+    if (!this.props) {
+      this.props = {};
+    }
+
+    // used to keep track of all nodes created by show/for
+    this.nodesToDestroy = [];
+    // batch updates
+    this.pendingUpdate = false;
+
+    if (undefined) {
+      this.attachShadow({ mode: \\"open\\" });
+    }
+  }
+
+  destroyAnyNodes() {
+    // destroy current view template refs before rendering again
+    this.nodesToDestroy.forEach((el) => el.remove());
+    this.nodesToDestroy = [];
+  }
+
+  connectedCallback() {
+    this._root.innerHTML = \`
+      <button
+        data-el=\\"button-basic-ref-attribute-passing-component-1\\"
+        data-ref=\\"BasicRefAttributePassingComponent-buttonRef\\"
+      >
+        Attribute Passing
+      </button>\`;
+    this.pendingUpdate = true;
+
+    this.render();
+    this.onMount();
+    this.pendingUpdate = false;
+    this.update();
+  }
+
+  onMount() {}
+
+  onUpdate() {}
+
+  update() {
+    if (this.pendingUpdate === true) {
+      return;
+    }
+    this.pendingUpdate = true;
+    this.render();
+    this.onUpdate();
+    this.pendingUpdate = false;
+  }
+
+  render() {
+    // re-rendering needs to ensure that all nodes generated by for/show are refreshed
+    this.destroyAnyNodes();
+    this.updateBindings();
+  }
+
+  updateBindings() {}
+
+  // Helper to render content
+  renderTextNode(el, text) {
+    const textNode = document.createTextNode(text);
+    if (el?.scope) {
+      textNode.scope = el.scope;
+    }
+    if (el?.context) {
+      textNode.context = el.context;
+    }
+    el.after(textNode);
+    this.nodesToDestroy.push(el.nextSibling);
+  }
+}
+
+customElements.define(
+  \\"basic-ref-attribute-passing-component\\",
+  BasicRefAttributePassingComponent
+);
+"
+`;
+
+exports[`webcomponent > jsx > Javascript Test > basicRefAttributePassingCustomRef 1`] = `
+"/**
+          useMetadata:
+          {\\"attributePassing\\":{\\"enabled\\":true,\\"customRef\\":\\"buttonRef\\"}}
+          */
+
+/**
+ * Usage:
+ *
+ *  <basic-ref-attribute-passing-custom-ref-component></basic-ref-attribute-passing-custom-ref-component>
+ *
+ */
+class BasicRefAttributePassingCustomRefComponent extends HTMLElement {
+  get _buttonRef() {
+    return this._root.querySelector(
+      \\"[data-ref='BasicRefAttributePassingCustomRefComponent-buttonRef']\\"
+    );
+  }
+
+  get _root() {
+    return this.shadowRoot || this;
+  }
+
+  constructor() {
+    super();
+    const self = this;
+
+    this.state = {};
+    if (!this.props) {
+      this.props = {};
+    }
+
+    // used to keep track of all nodes created by show/for
+    this.nodesToDestroy = [];
+    // batch updates
+    this.pendingUpdate = false;
+
+    if (undefined) {
+      this.attachShadow({ mode: \\"open\\" });
+    }
+  }
+
+  destroyAnyNodes() {
+    // destroy current view template refs before rendering again
+    this.nodesToDestroy.forEach((el) => el.remove());
+    this.nodesToDestroy = [];
+  }
+
+  connectedCallback() {
+    this._root.innerHTML = \`
+      <div>
+        <button
+          data-el=\\"button-basic-ref-attribute-passing-custom-ref-component-1\\"
+          data-ref=\\"BasicRefAttributePassingCustomRefComponent-buttonRef\\"
+        >
+          Attribute Passing
+        </button>
+      </div>\`;
+    this.pendingUpdate = true;
+
+    this.render();
+    this.onMount();
+    this.pendingUpdate = false;
+    this.update();
+  }
+
+  onMount() {}
+
+  onUpdate() {}
+
+  update() {
+    if (this.pendingUpdate === true) {
+      return;
+    }
+    this.pendingUpdate = true;
+    this.render();
+    this.onUpdate();
+    this.pendingUpdate = false;
+  }
+
+  render() {
+    // re-rendering needs to ensure that all nodes generated by for/show are refreshed
+    this.destroyAnyNodes();
+    this.updateBindings();
+  }
+
+  updateBindings() {}
+
+  // Helper to render content
+  renderTextNode(el, text) {
+    const textNode = document.createTextNode(text);
+    if (el?.scope) {
+      textNode.scope = el.scope;
+    }
+    if (el?.context) {
+      textNode.context = el.context;
+    }
+    el.after(textNode);
+    this.nodesToDestroy.push(el.nextSibling);
+  }
+}
+
+customElements.define(
+  \\"basic-ref-attribute-passing-custom-ref-component\\",
+  BasicRefAttributePassingCustomRefComponent
+);
+"
+`;
+
 exports[`webcomponent > jsx > Javascript Test > class + ClassName + css 1`] = `
 "import MyComp from \\"./my-component.js\\";
 
@@ -25594,6 +25810,222 @@ customElements.define(
 "
 `;
 
+exports[`webcomponent > jsx > Typescript Test > basicRefAttributePassing 1`] = `
+"/**
+          useMetadata:
+          {\\"attributePassing\\":{\\"enabled\\":true}}
+          */
+
+/**
+ * Usage:
+ *
+ *  <basic-ref-attribute-passing-component></basic-ref-attribute-passing-component>
+ *
+ */
+class BasicRefAttributePassingComponent extends HTMLElement {
+  get _buttonRef() {
+    return this._root.querySelector(
+      \\"[data-ref='BasicRefAttributePassingComponent-buttonRef']\\"
+    );
+  }
+
+  get _root() {
+    return this.shadowRoot || this;
+  }
+
+  constructor() {
+    super();
+    const self = this;
+
+    this.state = {};
+    if (!this.props) {
+      this.props = {};
+    }
+
+    // used to keep track of all nodes created by show/for
+    this.nodesToDestroy = [];
+    // batch updates
+    this.pendingUpdate = false;
+
+    if (undefined) {
+      this.attachShadow({ mode: \\"open\\" });
+    }
+  }
+
+  destroyAnyNodes() {
+    // destroy current view template refs before rendering again
+    this.nodesToDestroy.forEach((el) => el.remove());
+    this.nodesToDestroy = [];
+  }
+
+  connectedCallback() {
+    this._root.innerHTML = \`
+      <button
+        data-el=\\"button-basic-ref-attribute-passing-component-1\\"
+        data-ref=\\"BasicRefAttributePassingComponent-buttonRef\\"
+      >
+        Attribute Passing
+      </button>\`;
+    this.pendingUpdate = true;
+
+    this.render();
+    this.onMount();
+    this.pendingUpdate = false;
+    this.update();
+  }
+
+  onMount() {}
+
+  onUpdate() {}
+
+  update() {
+    if (this.pendingUpdate === true) {
+      return;
+    }
+    this.pendingUpdate = true;
+    this.render();
+    this.onUpdate();
+    this.pendingUpdate = false;
+  }
+
+  render() {
+    // re-rendering needs to ensure that all nodes generated by for/show are refreshed
+    this.destroyAnyNodes();
+    this.updateBindings();
+  }
+
+  updateBindings() {}
+
+  // Helper to render content
+  renderTextNode(el, text) {
+    const textNode = document.createTextNode(text);
+    if (el?.scope) {
+      textNode.scope = el.scope;
+    }
+    if (el?.context) {
+      textNode.context = el.context;
+    }
+    el.after(textNode);
+    this.nodesToDestroy.push(el.nextSibling);
+  }
+}
+
+customElements.define(
+  \\"basic-ref-attribute-passing-component\\",
+  BasicRefAttributePassingComponent
+);
+"
+`;
+
+exports[`webcomponent > jsx > Typescript Test > basicRefAttributePassingCustomRef 1`] = `
+"/**
+          useMetadata:
+          {\\"attributePassing\\":{\\"enabled\\":true,\\"customRef\\":\\"buttonRef\\"}}
+          */
+
+/**
+ * Usage:
+ *
+ *  <basic-ref-attribute-passing-custom-ref-component></basic-ref-attribute-passing-custom-ref-component>
+ *
+ */
+class BasicRefAttributePassingCustomRefComponent extends HTMLElement {
+  get _buttonRef() {
+    return this._root.querySelector(
+      \\"[data-ref='BasicRefAttributePassingCustomRefComponent-buttonRef']\\"
+    );
+  }
+
+  get _root() {
+    return this.shadowRoot || this;
+  }
+
+  constructor() {
+    super();
+    const self = this;
+
+    this.state = {};
+    if (!this.props) {
+      this.props = {};
+    }
+
+    // used to keep track of all nodes created by show/for
+    this.nodesToDestroy = [];
+    // batch updates
+    this.pendingUpdate = false;
+
+    if (undefined) {
+      this.attachShadow({ mode: \\"open\\" });
+    }
+  }
+
+  destroyAnyNodes() {
+    // destroy current view template refs before rendering again
+    this.nodesToDestroy.forEach((el) => el.remove());
+    this.nodesToDestroy = [];
+  }
+
+  connectedCallback() {
+    this._root.innerHTML = \`
+      <div>
+        <button
+          data-el=\\"button-basic-ref-attribute-passing-custom-ref-component-1\\"
+          data-ref=\\"BasicRefAttributePassingCustomRefComponent-buttonRef\\"
+        >
+          Attribute Passing
+        </button>
+      </div>\`;
+    this.pendingUpdate = true;
+
+    this.render();
+    this.onMount();
+    this.pendingUpdate = false;
+    this.update();
+  }
+
+  onMount() {}
+
+  onUpdate() {}
+
+  update() {
+    if (this.pendingUpdate === true) {
+      return;
+    }
+    this.pendingUpdate = true;
+    this.render();
+    this.onUpdate();
+    this.pendingUpdate = false;
+  }
+
+  render() {
+    // re-rendering needs to ensure that all nodes generated by for/show are refreshed
+    this.destroyAnyNodes();
+    this.updateBindings();
+  }
+
+  updateBindings() {}
+
+  // Helper to render content
+  renderTextNode(el, text) {
+    const textNode = document.createTextNode(text);
+    if (el?.scope) {
+      textNode.scope = el.scope;
+    }
+    if (el?.context) {
+      textNode.context = el.context;
+    }
+    el.after(textNode);
+    this.nodesToDestroy.push(el.nextSibling);
+  }
+}
+
+customElements.define(
+  \\"basic-ref-attribute-passing-custom-ref-component\\",
+  BasicRefAttributePassingCustomRefComponent
+);
+"
+`;
+
 exports[`webcomponent > jsx > Typescript Test > class + ClassName + css 1`] = `
 "import MyComp from \\"./my-component.js\\";
 
diff --git a/packages/core/src/__tests__/angular.test.ts b/packages/core/src/__tests__/angular.test.ts
index 588e5b22fa..5ef63bcc20 100644
--- a/packages/core/src/__tests__/angular.test.ts
+++ b/packages/core/src/__tests__/angular.test.ts
@@ -11,3 +11,18 @@ describe('Angular', () => {
     generator: componentToAngular,
   });
 });
+
+/*describe('Angular local', () => {
+  runTestsForTarget({
+    options: {
+      standalone: true,
+    },
+    target: 'angular',
+    generator: componentToAngular,
+    only: [
+      // 'basicRefAttributePassing',
+      'basicRefAttributePassingCustomRef'
+    ],
+    logOutput: true,
+  });
+});*/
diff --git a/packages/core/src/__tests__/builder.test.ts b/packages/core/src/__tests__/builder.test.ts
index 1bf663fbf6..4663febc84 100644
--- a/packages/core/src/__tests__/builder.test.ts
+++ b/packages/core/src/__tests__/builder.test.ts
@@ -9,7 +9,6 @@ import { parseJsx } from '@/parsers/jsx';
 import { compileAwayBuilderComponents } from '@/plugins/compile-away-builder-components';
 import { BuilderContent } from '@builder.io/sdk';
 
-import asyncBindings from './data/basic-ref-assignment.raw.tsx?raw';
 import columns from './data/blocks/columns.raw.tsx?raw';
 import customCode from './data/blocks/custom-code.raw.tsx?raw';
 import embed from './data/blocks/embed.raw.tsx?raw';
@@ -23,6 +22,7 @@ import slotsContent from './data/builder/slots.json?raw';
 import slots2Content from './data/builder/slots2.json?raw';
 import textBindings from './data/builder/text-bindings.json?raw';
 import advancedFor from './data/for/advanced-for.raw.tsx?raw';
+import asyncBindings from './data/ref/basic-ref-assignment.raw.tsx?raw';
 import show from './data/show/show-expressions.raw.tsx?raw';
 
 const mitosisOptions: ToMitosisOptions = {
diff --git a/packages/core/src/__tests__/data/basic-forwardRef-metadata.raw.tsx b/packages/core/src/__tests__/data/ref/basic-forwardRef-metadata.raw.tsx
similarity index 100%
rename from packages/core/src/__tests__/data/basic-forwardRef-metadata.raw.tsx
rename to packages/core/src/__tests__/data/ref/basic-forwardRef-metadata.raw.tsx
diff --git a/packages/core/src/__tests__/data/basic-forwardRef.raw.tsx b/packages/core/src/__tests__/data/ref/basic-forwardRef.raw.tsx
similarity index 100%
rename from packages/core/src/__tests__/data/basic-forwardRef.raw.tsx
rename to packages/core/src/__tests__/data/ref/basic-forwardRef.raw.tsx
diff --git a/packages/core/src/__tests__/data/basic-ref-assignment.raw.tsx b/packages/core/src/__tests__/data/ref/basic-ref-assignment.raw.tsx
similarity index 100%
rename from packages/core/src/__tests__/data/basic-ref-assignment.raw.tsx
rename to packages/core/src/__tests__/data/ref/basic-ref-assignment.raw.tsx
diff --git a/packages/core/src/__tests__/data/ref/basic-ref-attribute-passing-custom-ref.raw.tsx b/packages/core/src/__tests__/data/ref/basic-ref-attribute-passing-custom-ref.raw.tsx
new file mode 100644
index 0000000000..679570c1e7
--- /dev/null
+++ b/packages/core/src/__tests__/data/ref/basic-ref-attribute-passing-custom-ref.raw.tsx
@@ -0,0 +1,18 @@
+import { useMetadata, useRef } from '@builder.io/mitosis';
+
+useMetadata({
+  attributePassing: {
+    enabled: true,
+    customRef: 'buttonRef',
+  },
+});
+
+export default function BasicRefAttributePassingCustomRefComponent() {
+  const buttonRef = useRef<HTMLButtonElement | null>(null);
+
+  return (
+    <div>
+      <button ref={buttonRef}>Attribute Passing</button>
+    </div>
+  );
+}
diff --git a/packages/core/src/__tests__/data/ref/basic-ref-attribute-passing.raw.tsx b/packages/core/src/__tests__/data/ref/basic-ref-attribute-passing.raw.tsx
new file mode 100644
index 0000000000..4726c86957
--- /dev/null
+++ b/packages/core/src/__tests__/data/ref/basic-ref-attribute-passing.raw.tsx
@@ -0,0 +1,13 @@
+import { useMetadata, useRef } from '@builder.io/mitosis';
+
+useMetadata({
+  attributePassing: {
+    enabled: true,
+  },
+});
+
+export default function BasicRefAttributePassingComponent() {
+  const buttonRef = useRef<HTMLButtonElement | null>(null);
+
+  return <button ref={buttonRef}>Attribute Passing</button>;
+}
diff --git a/packages/core/src/__tests__/data/basic-ref-usePrevious.raw.tsx b/packages/core/src/__tests__/data/ref/basic-ref-usePrevious.raw.tsx
similarity index 100%
rename from packages/core/src/__tests__/data/basic-ref-usePrevious.raw.tsx
rename to packages/core/src/__tests__/data/ref/basic-ref-usePrevious.raw.tsx
diff --git a/packages/core/src/__tests__/data/basic-ref.raw.tsx b/packages/core/src/__tests__/data/ref/basic-ref.raw.tsx
similarity index 100%
rename from packages/core/src/__tests__/data/basic-ref.raw.tsx
rename to packages/core/src/__tests__/data/ref/basic-ref.raw.tsx
diff --git a/packages/core/src/__tests__/test-generator.ts b/packages/core/src/__tests__/test-generator.ts
index d3b759a6fe..8b3f97e664 100644
--- a/packages/core/src/__tests__/test-generator.ts
+++ b/packages/core/src/__tests__/test-generator.ts
@@ -35,11 +35,15 @@ const basicMitosis = getRawFile('./data/basic-custom-mitosis-package.raw.tsx');
 const basicChildComponent = getRawFile('./data/basic-child-component.raw.tsx');
 const basicFor = getRawFile('./data/for/basic-for.raw.tsx');
 const basicForNoTagReference = getRawFile('./data/for/basic-for-no-tag-reference.raw.tsx');
-const basicRef = getRawFile('./data/basic-ref.raw.tsx');
-const basicForwardRef = getRawFile('./data/basic-forwardRef.raw.tsx');
-const basicForwardRefMetadata = getRawFile('./data/basic-forwardRef-metadata.raw.tsx');
-const basicRefPrevious = getRawFile('./data/basic-ref-usePrevious.raw.tsx');
-const basicRefAssignment = getRawFile('./data/basic-ref-assignment.raw.tsx');
+const basicRef = getRawFile('./data/ref/basic-ref.raw.tsx');
+const basicRefAttributePassing = getRawFile('./data/ref/basic-ref-attribute-passing.raw.tsx');
+const basicRefAttributePassingCustomRef = getRawFile(
+  './data/ref/basic-ref-attribute-passing-custom-ref.raw.tsx',
+);
+const basicForwardRef = getRawFile('./data/ref/basic-forwardRef.raw.tsx');
+const basicForwardRefMetadata = getRawFile('./data/ref/basic-forwardRef-metadata.raw.tsx');
+const basicRefPrevious = getRawFile('./data/ref/basic-ref-usePrevious.raw.tsx');
+const basicRefAssignment = getRawFile('./data/ref/basic-ref-assignment.raw.tsx');
 const eventInputAndChange = getRawFile('./data/events/event-input-and-change.raw.tsx');
 const propsDestructure = getRawFile('./data/basic-props-destructure.raw.tsx');
 const nestedStyles = getRawFile('./data/nested-styles.raw.tsx');
@@ -184,6 +188,8 @@ const BASIC_TESTS: Tests = {
   BasicAttribute: basicAttribute,
   BasicBooleanAttribute: basicBooleanAttribute,
   BasicRef: basicRef,
+  basicRefAttributePassing,
+  basicRefAttributePassingCustomRef,
   BasicRefPrevious: basicRefPrevious,
   BasicRefAssignment: basicRefAssignment,
   BasicChildComponent: basicChildComponent,
diff --git a/packages/core/src/generators/angular/blocks.ts b/packages/core/src/generators/angular/blocks.ts
new file mode 100644
index 0000000000..325ee40ade
--- /dev/null
+++ b/packages/core/src/generators/angular/blocks.ts
@@ -0,0 +1,489 @@
+import { SELF_CLOSING_HTML_TAGS, VALID_HTML_TAGS } from '@/constants/html_tags';
+import { HELPER_FUNCTIONS, hasFirstChildKeyAttribute } from '@/generators/angular/helpers';
+import {
+  addCodeNgAfterViewInit,
+  addCodeToOnInit,
+  addCodeToOnUpdate,
+  makeReactiveState,
+} from '@/generators/angular/helpers/hooks';
+import { parse } from '@/generators/angular/parse-selector';
+import { AngularBlockOptions, ToAngularOptions } from '@/generators/angular/types';
+import { createSingleBinding } from '@/helpers/bindings';
+import { checkIsBindingNativeEvent, checkIsEvent } from '@/helpers/event-handlers';
+import isChildren from '@/helpers/is-children';
+import { isMitosisNode } from '@/helpers/is-mitosis-node';
+import { removeSurroundingBlock } from '@/helpers/remove-surrounding-block';
+import { isSlotProperty, stripSlotPrefix, toKebabSlot } from '@/helpers/slots';
+import { hashCodeAsString } from '@/symbols/symbol-processor';
+import { BaseHook, MitosisComponent } from '@/types/mitosis-component';
+import { Binding, MitosisNode, checkIsForNode } from '@/types/mitosis-node';
+import { pipe } from 'fp-ts/function';
+import { isString, kebabCase } from 'lodash';
+
+const mappers: {
+  [key: string]: (
+    root: MitosisComponent,
+    json: MitosisNode,
+    options: ToAngularOptions,
+    blockOptions: AngularBlockOptions,
+  ) => string;
+} = {
+  Fragment: (root, json, options, blockOptions) => {
+    return `<ng-container>${json.children
+      .map((item) => blockToAngular({ root, json: item, options, blockOptions }))
+      .join('\n')}</ng-container>`;
+  },
+  Slot: (root, json, options, blockOptions) => {
+    const renderChildren = () =>
+      json.children
+        ?.map((item) => blockToAngular({ root, json: item, options, blockOptions }))
+        .join('\n');
+
+    return `<ng-content ${Object.entries({ ...json.bindings, ...json.properties })
+      .map(([binding, value]) => {
+        if (value && binding === 'name') {
+          const selector = pipe(isString(value) ? value : value.code, stripSlotPrefix, kebabCase);
+          return `select="[${selector}]"`;
+        }
+      })
+      .join('\n')}>${Object.entries(json.bindings)
+      .map(([binding, value]) => {
+        if (value && binding !== 'name') {
+          return value.code;
+        }
+      })
+      .join('\n')}${renderChildren()}</ng-content>`;
+  },
+};
+
+// TODO: Maybe in the future allow defining `string | function` as values
+const BINDINGS_MAPPER: { [key: string]: string | undefined } = {
+  innerHTML: 'innerHTML',
+  style: 'ngStyle',
+};
+
+const handleNgOutletBindings = (node: MitosisNode, options: ToAngularOptions) => {
+  let allProps = '';
+  for (const key in node.properties) {
+    if (key.startsWith('$')) {
+      continue;
+    }
+    if (key === 'key') {
+      continue;
+    }
+    const value = node.properties[key];
+    allProps += `${key}: '${value}', `;
+  }
+
+  for (const key in node.bindings) {
+    if (key.startsWith('"')) {
+      continue;
+    }
+    if (key.startsWith('$')) {
+      continue;
+    }
+    let { code, arguments: cusArgs = ['event'] } = node.bindings[key]!;
+    if (options.state === 'class-properties') {
+      code = `this.${code}`;
+
+      if (node.bindings[key]?.type === 'spread') {
+        allProps += `...${code}, `;
+        continue;
+      }
+    }
+
+    let keyToUse = key.includes('-') ? `'${key}'` : key;
+    keyToUse = keyToUse.replace('state.', '').replace('props.', '');
+
+    if (checkIsEvent(key)) {
+      const { event, value } = processEventBinding(key, code, node.name, cusArgs[0]);
+      allProps += `on${event.charAt(0).toUpperCase() + event.slice(1)}: ${value.replace(
+        /\(.*?\)/g,
+        '',
+      )}.bind(this), `;
+    } else {
+      const codeToUse =
+        options.state === 'inline-with-wrappers' ? processCodeBlockInTemplate(code) : code;
+      allProps += `${keyToUse}: ${codeToUse}, `;
+    }
+  }
+
+  if (allProps.endsWith(', ')) {
+    allProps = allProps.slice(0, -2);
+  }
+
+  if (allProps.startsWith(', ')) {
+    allProps = allProps.slice(2);
+  }
+
+  return allProps;
+};
+
+const handleObjectBindings = (code: string) => {
+  let objectCode = code.replace(/^{/, '').replace(/}$/, '');
+  objectCode = objectCode.replace(/\/\/.*\n/g, '');
+
+  let temp = objectCode;
+
+  //STEP 1. remove spread operator for expressions like '{ ...objectName }' and replace them with object name, example {...obj} => obj
+  temp = temp.replace(/\{\s*\.\.\.(\w+)\s*}/g, '$1');
+  //STEP 2. remove all remaining spread operators that could be nested somewhere deeper, example { ...obj, field1: value1 } => { obj, field1: value1 }
+  temp = temp.replace(/\.\.\./g, '');
+  //STEP 3. deal with consequences of STEP 2 - for all left field assignments we create new objects provided to useObjectWrapper,
+  //and we get rid of surrounding brackets of the initial input value, example {...obj1,test:true,...obj2} => obj1, {test: true}, obj2
+  temp = temp.replace(/(\s*\w+\s*:\s*((["'].+["'])|(\[.+])|([\w.]+)))(,|[\n\s]*)/g, `{ $1 },`);
+
+  // handle template strings
+  if (temp.includes('`')) {
+    // template str
+    let str = temp.match(/`[^`]*`/g);
+
+    let values = str && str[0].match(/\${[^}]*}/g);
+    let forValues = values?.map((val) => val.slice(2, -1)).join(' + ');
+
+    if (str && forValues) {
+      temp = temp.replace(str[0], forValues);
+    }
+  }
+
+  return temp;
+};
+
+const processCodeBlockInTemplate = (code: string) => {
+  // contains helper calls as Angular doesn't support JS expressions in templates
+  if (code.startsWith('{') && code.includes('...')) {
+    // Objects cannot be spread out directly in Angular so we need to use `useObjectWrapper`
+    return `useObjectWrapper(${handleObjectBindings(code)})`;
+  } else if (code.startsWith('Object.values')) {
+    let stripped = code.replace('Object.values', '');
+    return `useObjectDotValues${stripped}`;
+  } else if (code.includes('JSON.stringify')) {
+    let obj = code.match(/JSON.stringify\((.*)\)/);
+    return `useJsonStringify(${obj})`;
+  } else if (code.includes(' as ')) {
+    const asIndex = code.indexOf('as');
+    const asCode = code.slice(0, asIndex - 1);
+    return `$any${asCode})`;
+  } else {
+    return `${code}`;
+  }
+};
+
+const processEventBinding = (key: string, code: string, nodeName: string, customArg: string) => {
+  let event = key.replace('on', '');
+  event = event.charAt(0).toLowerCase() + event.slice(1);
+
+  // TODO: proper babel transform to replace. Util for this
+  const eventName = customArg;
+  const regexp = new RegExp(
+    '(^|\\n|\\r| |;|\\(|\\[|!)' + eventName + '(\\?\\.|\\.|\\(| |;|\\)|$)',
+    'g',
+  );
+  const replacer = '$1$event$2';
+  const finalValue = removeSurroundingBlock(code.replace(regexp, replacer));
+  return {
+    event,
+    value: finalValue,
+  };
+};
+
+const stringifyBinding =
+  (node: MitosisNode, options: ToAngularOptions, blockOptions: AngularBlockOptions) =>
+  ([key, binding]: [string, Binding | undefined]) => {
+    if (key.startsWith('$') || key.startsWith('"') || key === 'key') {
+      return;
+    }
+    if (binding?.type === 'spread') {
+      return;
+    }
+
+    const keyToUse = BINDINGS_MAPPER[key] || key;
+    const { code, arguments: cusArgs = ['event'] } = binding!;
+    // TODO: proper babel transform to replace. Util for this
+
+    if (checkIsEvent(keyToUse)) {
+      const { event, value } = processEventBinding(keyToUse, code, node.name, cusArgs[0]);
+
+      // native events are all lowerCased
+      const lowerCaseEvent = event.toLowerCase();
+      const eventKey =
+        checkIsBindingNativeEvent(event) ||
+        blockOptions.nativeEvents?.find(
+          (nativeEvent) =>
+            nativeEvent === keyToUse || nativeEvent === event || nativeEvent === lowerCaseEvent,
+        )
+          ? lowerCaseEvent
+          : event;
+      return ` (${eventKey})="${value}"`;
+    } else if (keyToUse === 'class') {
+      return ` [class]="${code}" `;
+    } else if (keyToUse === 'ref' || keyToUse === 'spreadRef') {
+      return ` #${code} `;
+    } else if (
+      (VALID_HTML_TAGS.includes(node.name.trim()) || keyToUse.includes('-')) &&
+      !blockOptions.nativeAttributes?.includes(keyToUse) &&
+      !Object.values(BINDINGS_MAPPER).includes(keyToUse)
+    ) {
+      // standard html elements need the attr to satisfy the compiler in many cases: eg: svg elements and [fill]
+      return ` [attr.${keyToUse}]="${code}" `;
+    } else {
+      const codeToUse =
+        options.state === 'inline-with-wrappers' ? processCodeBlockInTemplate(code) : code;
+      return `[${keyToUse}]="${codeToUse}"`;
+    }
+  };
+
+export const blockToAngular = ({
+  root,
+  json,
+  options = {},
+  blockOptions = {
+    nativeAttributes: [],
+    nativeEvents: [],
+  },
+  rootRef,
+}: {
+  root: MitosisComponent;
+  json: MitosisNode;
+  options?: ToAngularOptions;
+  rootRef?: string;
+  blockOptions?: AngularBlockOptions;
+}): string => {
+  const childComponents = blockOptions?.childComponents || [];
+
+  if (mappers[json.name]) {
+    return mappers[json.name](root, json, options, blockOptions);
+  }
+
+  if (isChildren({ node: json })) {
+    return `<ng-content></ng-content>`;
+  }
+
+  if (json.properties._text) {
+    return json.properties._text;
+  }
+  const textCode = json.bindings._text?.code;
+  if (textCode) {
+    if (isSlotProperty(textCode)) {
+      return `<ng-content select="[${toKebabSlot(textCode)}]"></ng-content>`;
+    }
+
+    if (textCode.includes('JSON.stringify')) {
+      const obj = textCode.replace(/JSON.stringify\(\s*(\w+)\s*,?.*\)/, '$1');
+      return `{{${obj} | json}}`;
+    }
+
+    return `{{${textCode}}}`;
+  }
+
+  let str = '';
+
+  if (checkIsForNode(json)) {
+    const indexName = json.scope.indexName;
+    const forName = json.scope.forName;
+
+    // Check if "key" is present for the first child of the for loop
+    if (hasFirstChildKeyAttribute(json)) {
+      const fnIndex = (root.meta?._trackByForIndex as number) || 0;
+      const trackByFnName = `trackBy${
+        forName ? forName.charAt(0).toUpperCase() + forName.slice(1) : ''
+      }${fnIndex}`;
+      root.meta._trackByForIndex = fnIndex + 1;
+      let code = json.children[0].bindings.key?.code;
+
+      root.state[trackByFnName] = {
+        code: `${trackByFnName}(${indexName ?? '_'}, ${forName}) { return ${code}; }`,
+        type: 'method',
+      };
+
+      str += `<ng-container *ngFor="let ${forName ?? '_'} of ${json.bindings.each?.code}${
+        indexName ? `; index as ${indexName}` : ''
+      }; trackBy: ${trackByFnName}">`;
+    } else {
+      str += `<ng-container *ngFor="let ${forName ?? '_'} of ${json.bindings.each?.code}${
+        indexName ? `; index as ${indexName}` : ''
+      }">`;
+    }
+    str += json.children
+      .map((item) => blockToAngular({ root, json: item, options, blockOptions }))
+      .join('\n');
+    str += `</ng-container>`;
+  } else if (json.name === 'Show') {
+    let condition = json.bindings.when?.code;
+    if (options.state === 'inline-with-wrappers' && condition?.includes('typeof')) {
+      let wordAfterTypeof = condition.split('typeof')[1].trim().split(' ')[0];
+      condition = condition.replace(`typeof ${wordAfterTypeof}`, `useTypeOf(${wordAfterTypeof})`);
+    }
+    str += `<ng-container *ngIf="${condition}">`;
+    str += json.children
+      .map((item) => blockToAngular({ root, json: item, options, blockOptions }))
+      .join('\n');
+    str += `</ng-container>`;
+    // else condition
+    if (isMitosisNode(json.meta?.else)) {
+      str += `<ng-container *ngIf="!(${condition})">`;
+      str += blockToAngular({ root, json: json.meta.else, options, blockOptions });
+      str += `</ng-container>`;
+    }
+  } else if (json.name.includes('.')) {
+    const elSelector = childComponents.find((impName) => impName === json.name)
+      ? kebabCase(json.name)
+      : json.name;
+
+    let allProps = handleNgOutletBindings(json, options);
+    if (options.state === 'class-properties') {
+      const inputsPropsStateName = `mergedInputs_${hashCodeAsString(allProps)}`;
+      root.state[inputsPropsStateName] = {
+        code: '{}' + (options.typescript ? ' as any' : ''),
+        type: 'property',
+      };
+      if (!root.hooks.onInit?.code.includes(inputsPropsStateName)) {
+        addCodeToOnInit(root, `this.${inputsPropsStateName} = {${allProps}};`);
+      }
+      if (
+        !root.hooks.onUpdate
+          ?.map((hook) => hook.code)
+          .join('')
+          .includes(inputsPropsStateName)
+      ) {
+        addCodeToOnUpdate(root, `this.${inputsPropsStateName} = {${allProps}};`);
+      }
+      allProps = `${inputsPropsStateName}`;
+    } else {
+      allProps = `{ ${allProps} }`;
+    }
+
+    str += `<ng-container *ngComponentOutlet="
+      ${elSelector.replace('state.', '').replace('props.', '')};
+      inputs: ${allProps};
+      content: myContent;
+      ">  `;
+
+    str += `</ng-container>`;
+  } else {
+    let element,
+      classNames: string[] = [],
+      attributes;
+
+    const isComponent = childComponents.find((impName) => impName === json.name);
+
+    if (isComponent) {
+      const selector = json.meta.selector || blockOptions?.selector;
+      if (selector) {
+        try {
+          ({ element, classNames, attributes } = parse(`${selector}`));
+        } catch {
+          element = kebabCase(json.name);
+        }
+      } else {
+        element = kebabCase(json.name);
+      }
+    } else {
+      element = json.name;
+    }
+
+    str += `<${element} `;
+
+    // TODO: merge with existing classes/bindings
+    if (classNames.length) {
+      str += `class="${classNames.join(' ')}" `;
+    }
+
+    // TODO: Merge with existing properties
+    if (attributes) {
+      Object.entries(attributes).forEach(([key, value]) => {
+        if (value) {
+          str += `${key}=${JSON.stringify(value)} `;
+        } else {
+          str += `${key} `;
+        }
+      });
+    }
+
+    for (const key in json.properties) {
+      if (key.startsWith('$')) {
+        continue;
+      }
+      const value = json.properties[key];
+      str += ` ${key}="${value}" `;
+    }
+
+    for (const key in json.bindings) {
+      if (json.bindings[key]?.type === 'spread' && VALID_HTML_TAGS.includes(json.name.trim())) {
+        if (json.bindings[key]?.code === 'this') {
+          // if its an arbitrary { ...props } spread then we skip because Angular needs a named prop to be defined
+          continue;
+        }
+
+        let refName = '';
+        if (json.bindings['spreadRef']?.code) {
+          refName = json.bindings['spreadRef'].code;
+        } else {
+          const spreadRefIndex = root.meta._spreadRefIndex || 0;
+          refName = `elRef${spreadRefIndex}`;
+          root.meta._spreadRefIndex = (spreadRefIndex as number) + 1;
+          json.bindings['spreadRef'] = createSingleBinding({ code: refName });
+          root.refs[refName] = { argument: '' };
+        }
+        json.bindings['spreadRef'] = createSingleBinding({ code: refName });
+        root.refs[refName] = { argument: '' };
+        root.meta.onViewInit = (root.meta.onViewInit || { code: '' }) as BaseHook;
+        let spreadCode = '';
+        let changesCode = '';
+        if (json.bindings[key]?.code.startsWith('{')) {
+          json.meta._spreadStateRef = json.meta._spreadStateRef || 0;
+          const name = `${refName}_state_${json.meta._spreadStateRef}`;
+          json.meta._spreadStateRef = (json.meta._spreadStateRef as number) + 1;
+          makeReactiveState(root, name, `this.${name} = ${json.bindings[key]?.code};`);
+          spreadCode = `this.${name}`;
+          changesCode = `changes['${spreadCode.replace('this.', '')}']?.currentValue`;
+        } else {
+          spreadCode = `${json.bindings[key]?.code}`;
+          changesCode = `changes['${spreadCode.replace('this.', '')}']?.currentValue`;
+        }
+        addCodeNgAfterViewInit(
+          root,
+          `\nthis.setAttributes(this.${refName}?.nativeElement, ${spreadCode});`,
+        );
+
+        addCodeToOnUpdate(
+          root,
+          `this.setAttributes(this.${refName}?.nativeElement, ${spreadCode}${
+            changesCode ? `, ${changesCode}` : ''
+          });`,
+        );
+        if (!root.state['setAttributes']) {
+          root.state['setAttributes'] = {
+            code: HELPER_FUNCTIONS(options?.typescript).setAttributes as string,
+            type: 'method',
+          };
+        }
+      }
+    }
+
+    const stringifiedBindings = Object.entries(json.bindings)
+      .map(stringifyBinding(json, options, blockOptions))
+      .join('');
+
+    str += stringifiedBindings;
+
+    if (rootRef && !str.includes(`#${rootRef}`)) {
+      // Add ref for passing attributes
+      str += `#${rootRef}`;
+    }
+
+    if (SELF_CLOSING_HTML_TAGS.has(json.name)) {
+      return str + ' />';
+    }
+    str += '>';
+
+    if (json.children) {
+      str += json.children
+        .map((item) => blockToAngular({ root, json: item, options, blockOptions }))
+        .join('\n');
+    }
+
+    str += `</${element}>`;
+  }
+  return str;
+};
diff --git a/packages/core/src/generators/angular/helpers/hooks.ts b/packages/core/src/generators/angular/helpers/hooks.ts
new file mode 100644
index 0000000000..9b12a804a0
--- /dev/null
+++ b/packages/core/src/generators/angular/helpers/hooks.ts
@@ -0,0 +1,57 @@
+import type { MitosisComponent } from '@/types/mitosis-component';
+
+export const addCodeNgAfterViewInit = (json: MitosisComponent, code: string) => {
+  if (!json.compileContext) {
+    json.compileContext = {
+      angular: {
+        hooks: {
+          ngAfterViewInit: {
+            code: '',
+          },
+        },
+      },
+    };
+  }
+
+  json.compileContext!.angular!.hooks!.ngAfterViewInit.code += code;
+};
+
+/**
+ * Adds code to the `onUpdate` hook of a MitosisComponent.
+ *
+ * @param {MitosisComponent} root - The root MitosisComponent.
+ * @param {string} code - The code to be added to the `onUpdate` hook.
+ */
+export const addCodeToOnUpdate = (root: MitosisComponent, code: string) => {
+  root.hooks.onUpdate = root.hooks.onUpdate || [];
+  root.hooks.onUpdate.push({
+    code,
+  });
+};
+
+/**
+ * Adds code to the `onInit` hook of a MitosisComponent.
+ *
+ * @param {MitosisComponent} root - The root MitosisComponent.
+ * @param {string} code - The code to be added to the `onInit` hook.
+ */
+export const addCodeToOnInit = (root: MitosisComponent, code: string) => {
+  if (!root.hooks.onInit?.code) {
+    root.hooks.onInit = { code: '' };
+  }
+  root.hooks.onInit.code += `\n${code};`;
+};
+
+/**
+ * Creates a reactive state in Angular.
+ * Initializes the state with `null` because we cannot access `state.` or `props.` properties before the component is initialized.
+ * Adds the code (init/re-init code) to the `onInit` and `onUpdate` hooks.
+ * @param root The root MitosisComponent.
+ * @param stateName The name of the reactive state.
+ * @param code The code to be added to the onInit and onUpdate hooks.
+ */
+export const makeReactiveState = (root: MitosisComponent, stateName: string, code: string) => {
+  root.state[stateName] = { code: 'null', type: 'property' };
+  addCodeToOnInit(root, code);
+  addCodeToOnUpdate(root, code);
+};
diff --git a/packages/core/src/generators/angular/helpers.ts b/packages/core/src/generators/angular/helpers/index.ts
similarity index 69%
rename from packages/core/src/generators/angular/helpers.ts
rename to packages/core/src/generators/angular/helpers/index.ts
index 7a9776a76a..9c82f61420 100644
--- a/packages/core/src/generators/angular/helpers.ts
+++ b/packages/core/src/generators/angular/helpers/index.ts
@@ -50,46 +50,6 @@ export const HELPER_FUNCTIONS = (
 export const getAppropriateTemplateFunctionKeys = (code: string) =>
   Object.keys(HELPER_FUNCTIONS()).filter((key) => code.includes(key));
 
-/**
- * Adds code to the `onUpdate` hook of a MitosisComponent.
- *
- * @param {MitosisComponent} root - The root MitosisComponent.
- * @param {string} code - The code to be added to the `onUpdate` hook.
- */
-export const addCodeToOnUpdate = (root: MitosisComponent, code: string) => {
-  root.hooks.onUpdate = root.hooks.onUpdate || [];
-  root.hooks.onUpdate.push({
-    code,
-  });
-};
-
-/**
- * Adds code to the `onInit` hook of a MitosisComponent.
- *
- * @param {MitosisComponent} root - The root MitosisComponent.
- * @param {string} code - The code to be added to the `onInit` hook.
- */
-export const addCodeToOnInit = (root: MitosisComponent, code: string) => {
-  if (!root.hooks.onInit?.code) {
-    root.hooks.onInit = { code: '' };
-  }
-  root.hooks.onInit.code += `\n${code};`;
-};
-
-/**
- * Creates a reactive state in Angular.
- * Initializes the state with `null` because we cannot access `state.` or `props.` properties before the component is initialized.
- * Adds the code (init/re-init code) to the `onInit` and `onUpdate` hooks.
- * @param root The root MitosisComponent.
- * @param stateName The name of the reactive state.
- * @param code The code to be added to the onInit and onUpdate hooks.
- */
-export const makeReactiveState = (root: MitosisComponent, stateName: string, code: string) => {
-  root.state[stateName] = { code: 'null', type: 'property' };
-  addCodeToOnInit(root, code);
-  addCodeToOnUpdate(root, code);
-};
-
 export const getDefaultProps = ({ defaultProps }: MitosisComponent) => {
   if (!defaultProps) return '';
   const defalutPropsString = Object.keys(defaultProps)
diff --git a/packages/core/src/generators/angular/index.ts b/packages/core/src/generators/angular/index.ts
index ae13fd59cf..dc6472b5c5 100644
--- a/packages/core/src/generators/angular/index.ts
+++ b/packages/core/src/generators/angular/index.ts
@@ -1,4 +1,4 @@
-import { SELF_CLOSING_HTML_TAGS, VALID_HTML_TAGS } from '@/constants/html_tags';
+import { VALID_HTML_TAGS } from '@/constants/html_tags';
 import { createSingleBinding } from '@/helpers/bindings';
 import { dedent } from '@/helpers/dedent';
 import { fastClone } from '@/helpers/fast-clone';
@@ -17,10 +17,9 @@ import { isUpperCase } from '@/helpers/is-upper-case';
 import { mapRefs } from '@/helpers/map-refs';
 import { initializeOptions } from '@/helpers/merge-options';
 import { CODE_PROCESSOR_PLUGIN } from '@/helpers/plugins/process-code';
-import { removeSurroundingBlock } from '@/helpers/remove-surrounding-block';
 import { renderPreComponent } from '@/helpers/render-imports';
 import { replaceIdentifiers, replaceNodes } from '@/helpers/replace-identifiers';
-import { isSlotProperty, stripSlotPrefix, toKebabSlot } from '@/helpers/slots';
+import { isSlotProperty } from '@/helpers/slots';
 import { stripMetaProperties } from '@/helpers/strip-meta-properties';
 import {
   DO_NOT_USE_VARS_TRANSFORMS,
@@ -35,25 +34,20 @@ import {
   runPreCodePlugins,
   runPreJsonPlugins,
 } from '@/modules/plugins';
-import { hashCodeAsString } from '@/symbols/symbol-processor';
-import { BaseHook, MitosisComponent } from '@/types/mitosis-component';
-import { Binding, MitosisNode, checkIsForNode } from '@/types/mitosis-node';
+import { MitosisComponent } from '@/types/mitosis-component';
+import { MitosisNode } from '@/types/mitosis-node';
 import { TranspilerGenerator } from '@/types/transpiler';
 import * as babel from '@babel/core';
 import { flow, pipe } from 'fp-ts/lib/function';
-import { isString, kebabCase, uniq } from 'lodash';
+import { kebabCase, uniq } from 'lodash';
 import traverse from 'neotraverse/legacy';
 import { format } from 'prettier/standalone';
 import isChildren from '../../helpers/is-children';
 import { stringifySingleScopeOnMount } from '../helpers/on-mount';
 import {
   HELPER_FUNCTIONS,
-  addCodeToOnInit,
-  addCodeToOnUpdate,
   getAppropriateTemplateFunctionKeys,
   getDefaultProps,
-  hasFirstChildKeyAttribute,
-  makeReactiveState,
   transformState,
 } from './helpers';
 import {
@@ -63,46 +57,19 @@ import {
   ToAngularOptions,
 } from './types';
 
-import { checkIsBindingNativeEvent, checkIsEvent } from '@/helpers/event-handlers';
-import { parse } from './parse-selector';
+import { dashCase } from '@/helpers/dash-case';
+import { checkIsEvent } from '@/helpers/event-handlers';
 
-const { types } = babel;
-
-const mappers: {
-  [key: string]: (
-    root: MitosisComponent,
-    json: MitosisNode,
-    options: ToAngularOptions,
-    blockOptions: AngularBlockOptions,
-  ) => string;
-} = {
-  Fragment: (root, json, options, blockOptions) => {
-    return `<ng-container>${json.children
-      .map((item) => blockToAngular({ root, json: item, options, blockOptions }))
-      .join('\n')}</ng-container>`;
-  },
-  Slot: (root, json, options, blockOptions) => {
-    const renderChildren = () =>
-      json.children
-        ?.map((item) => blockToAngular({ root, json: item, options, blockOptions }))
-        .join('\n');
+import { addCodeNgAfterViewInit, makeReactiveState } from '@/generators/angular/helpers/hooks';
+import {
+  ROOT_REF,
+  getAddAttributePassingRef,
+  getAttributePassingString,
+  shouldAddAttributePassing,
+} from '@/helpers/web-components/attribute-passing';
+import { blockToAngular } from './blocks';
 
-    return `<ng-content ${Object.entries({ ...json.bindings, ...json.properties })
-      .map(([binding, value]) => {
-        if (value && binding === 'name') {
-          const selector = pipe(isString(value) ? value : value.code, stripSlotPrefix, kebabCase);
-          return `select="[${selector}]"`;
-        }
-      })
-      .join('\n')}>${Object.entries(json.bindings)
-      .map(([binding, value]) => {
-        if (value && binding !== 'name') {
-          return value.code;
-        }
-      })
-      .join('\n')}${renderChildren()}</ng-content>`;
-  },
-};
+const { types } = babel;
 
 const preprocessCssAsJson = (json: MitosisComponent) => {
   traverse(json).forEach((item) => {
@@ -139,437 +106,6 @@ ${content}
 export class ${name}Module {}`;
 };
 
-// TODO: Maybe in the future allow defining `string | function` as values
-const BINDINGS_MAPPER: { [key: string]: string | undefined } = {
-  innerHTML: 'innerHTML',
-  style: 'ngStyle',
-};
-
-const handleObjectBindings = (code: string) => {
-  let objectCode = code.replace(/^{/, '').replace(/}$/, '');
-  objectCode = objectCode.replace(/\/\/.*\n/g, '');
-
-  let temp = objectCode;
-
-  //STEP 1. remove spread operator for expressions like '{ ...objectName }' and replace them with object name, example {...obj} => obj
-  temp = temp.replace(/\{\s*\.\.\.(\w+)\s*}/g, '$1');
-  //STEP 2. remove all remaining spread operators that could be nested somewhere deeper, example { ...obj, field1: value1 } => { obj, field1: value1 }
-  temp = temp.replace(/\.\.\./g, '');
-  //STEP 3. deal with consequences of STEP 2 - for all left field assignments we create new objects provided to useObjectWrapper,
-  //and we get rid of surrounding brackets of the initial input value, example {...obj1,test:true,...obj2} => obj1, {test: true}, obj2
-  temp = temp.replace(/(\s*\w+\s*:\s*((["'].+["'])|(\[.+])|([\w.]+)))(,|[\n\s]*)/g, `{ $1 },`);
-
-  // handle template strings
-  if (temp.includes('`')) {
-    // template str
-    let str = temp.match(/`[^`]*`/g);
-
-    let values = str && str[0].match(/\${[^}]*}/g);
-    let forValues = values?.map((val) => val.slice(2, -1)).join(' + ');
-
-    if (str && forValues) {
-      temp = temp.replace(str[0], forValues);
-    }
-  }
-
-  return temp;
-};
-
-const processCodeBlockInTemplate = (code: string) => {
-  // contains helper calls as Angular doesn't support JS expressions in templates
-  if (code.startsWith('{') && code.includes('...')) {
-    // Objects cannot be spread out directly in Angular so we need to use `useObjectWrapper`
-    return `useObjectWrapper(${handleObjectBindings(code)})`;
-  } else if (code.startsWith('Object.values')) {
-    let stripped = code.replace('Object.values', '');
-    return `useObjectDotValues${stripped}`;
-  } else if (code.includes('JSON.stringify')) {
-    let obj = code.match(/JSON.stringify\((.*)\)/);
-    return `useJsonStringify(${obj})`;
-  } else if (code.includes(' as ')) {
-    const asIndex = code.indexOf('as');
-    const asCode = code.slice(0, asIndex - 1);
-    return `$any${asCode})`;
-  } else {
-    return `${code}`;
-  }
-};
-
-const processEventBinding = (key: string, code: string, nodeName: string, customArg: string) => {
-  let event = key.replace('on', '');
-  event = event.charAt(0).toLowerCase() + event.slice(1);
-
-  // TODO: proper babel transform to replace. Util for this
-  const eventName = customArg;
-  const regexp = new RegExp(
-    '(^|\\n|\\r| |;|\\(|\\[|!)' + eventName + '(\\?\\.|\\.|\\(| |;|\\)|$)',
-    'g',
-  );
-  const replacer = '$1$event$2';
-  const finalValue = removeSurroundingBlock(code.replace(regexp, replacer));
-  return {
-    event,
-    value: finalValue,
-  };
-};
-
-const stringifyBinding =
-  (node: MitosisNode, options: ToAngularOptions, blockOptions: AngularBlockOptions) =>
-  ([key, binding]: [string, Binding | undefined]) => {
-    if (key.startsWith('$') || key.startsWith('"') || key === 'key') {
-      return;
-    }
-    if (binding?.type === 'spread') {
-      return;
-    }
-
-    const keyToUse = BINDINGS_MAPPER[key] || key;
-    const { code, arguments: cusArgs = ['event'] } = binding!;
-    // TODO: proper babel transform to replace. Util for this
-
-    if (checkIsEvent(keyToUse)) {
-      const { event, value } = processEventBinding(keyToUse, code, node.name, cusArgs[0]);
-
-      // native events are all lowerCased
-      const lowerCaseEvent = event.toLowerCase();
-      const eventKey =
-        checkIsBindingNativeEvent(event) ||
-        blockOptions.nativeEvents?.find(
-          (nativeEvent) =>
-            nativeEvent === keyToUse || nativeEvent === event || nativeEvent === lowerCaseEvent,
-        )
-          ? lowerCaseEvent
-          : event;
-      return ` (${eventKey})="${value}"`;
-    } else if (keyToUse === 'class') {
-      return ` [class]="${code}" `;
-    } else if (keyToUse === 'ref' || keyToUse === 'spreadRef') {
-      return ` #${code} `;
-    } else if (
-      (VALID_HTML_TAGS.includes(node.name.trim()) || keyToUse.includes('-')) &&
-      !blockOptions.nativeAttributes?.includes(keyToUse) &&
-      !Object.values(BINDINGS_MAPPER).includes(keyToUse)
-    ) {
-      // standard html elements need the attr to satisfy the compiler in many cases: eg: svg elements and [fill]
-      return ` [attr.${keyToUse}]="${code}" `;
-    } else {
-      const codeToUse =
-        options.state === 'inline-with-wrappers' ? processCodeBlockInTemplate(code) : code;
-      return `[${keyToUse}]="${codeToUse}"`;
-    }
-  };
-
-const handleNgOutletBindings = (node: MitosisNode, options: ToAngularOptions) => {
-  let allProps = '';
-  for (const key in node.properties) {
-    if (key.startsWith('$')) {
-      continue;
-    }
-    if (key === 'key') {
-      continue;
-    }
-    const value = node.properties[key];
-    allProps += `${key}: '${value}', `;
-  }
-
-  for (const key in node.bindings) {
-    if (key.startsWith('"')) {
-      continue;
-    }
-    if (key.startsWith('$')) {
-      continue;
-    }
-    let { code, arguments: cusArgs = ['event'] } = node.bindings[key]!;
-    if (options.state === 'class-properties') {
-      code = `this.${code}`;
-
-      if (node.bindings[key]?.type === 'spread') {
-        allProps += `...${code}, `;
-        continue;
-      }
-    }
-
-    let keyToUse = key.includes('-') ? `'${key}'` : key;
-    keyToUse = keyToUse.replace('state.', '').replace('props.', '');
-
-    if (checkIsEvent(key)) {
-      const { event, value } = processEventBinding(key, code, node.name, cusArgs[0]);
-      allProps += `on${event.charAt(0).toUpperCase() + event.slice(1)}: ${value.replace(
-        /\(.*?\)/g,
-        '',
-      )}.bind(this), `;
-    } else {
-      const codeToUse =
-        options.state === 'inline-with-wrappers' ? processCodeBlockInTemplate(code) : code;
-      allProps += `${keyToUse}: ${codeToUse}, `;
-    }
-  }
-
-  if (allProps.endsWith(', ')) {
-    allProps = allProps.slice(0, -2);
-  }
-
-  if (allProps.startsWith(', ')) {
-    allProps = allProps.slice(2);
-  }
-
-  return allProps;
-};
-
-export const blockToAngular = ({
-  root,
-  json,
-  options = {},
-  blockOptions = {
-    nativeAttributes: [],
-    nativeEvents: [],
-  },
-}: {
-  root: MitosisComponent;
-  json: MitosisNode;
-  options?: ToAngularOptions;
-  blockOptions?: AngularBlockOptions;
-}): string => {
-  const childComponents = blockOptions?.childComponents || [];
-
-  if (mappers[json.name]) {
-    return mappers[json.name](root, json, options, blockOptions);
-  }
-
-  if (isChildren({ node: json })) {
-    return `<ng-content></ng-content>`;
-  }
-
-  if (json.properties._text) {
-    return json.properties._text;
-  }
-  const textCode = json.bindings._text?.code;
-  if (textCode) {
-    if (isSlotProperty(textCode)) {
-      return `<ng-content select="[${toKebabSlot(textCode)}]"></ng-content>`;
-    }
-
-    if (textCode.includes('JSON.stringify')) {
-      const obj = textCode.replace(/JSON.stringify\(\s*(\w+)\s*,?.*\)/, '$1');
-      return `{{${obj} | json}}`;
-    }
-
-    return `{{${textCode}}}`;
-  }
-
-  let str = '';
-
-  if (checkIsForNode(json)) {
-    const indexName = json.scope.indexName;
-    const forName = json.scope.forName;
-
-    // Check if "key" is present for the first child of the for loop
-    if (hasFirstChildKeyAttribute(json)) {
-      const fnIndex = (root.meta?._trackByForIndex as number) || 0;
-      const trackByFnName = `trackBy${
-        forName ? forName.charAt(0).toUpperCase() + forName.slice(1) : ''
-      }${fnIndex}`;
-      root.meta._trackByForIndex = fnIndex + 1;
-      let code = json.children[0].bindings.key?.code;
-
-      root.state[trackByFnName] = {
-        code: `${trackByFnName}(${indexName ?? '_'}, ${forName}) { return ${code}; }`,
-        type: 'method',
-      };
-
-      str += `<ng-container *ngFor="let ${forName ?? '_'} of ${json.bindings.each?.code}${
-        indexName ? `; index as ${indexName}` : ''
-      }; trackBy: ${trackByFnName}">`;
-    } else {
-      str += `<ng-container *ngFor="let ${forName ?? '_'} of ${json.bindings.each?.code}${
-        indexName ? `; index as ${indexName}` : ''
-      }">`;
-    }
-    str += json.children
-      .map((item) => blockToAngular({ root, json: item, options, blockOptions }))
-      .join('\n');
-    str += `</ng-container>`;
-  } else if (json.name === 'Show') {
-    let condition = json.bindings.when?.code;
-    if (options.state === 'inline-with-wrappers' && condition?.includes('typeof')) {
-      let wordAfterTypeof = condition.split('typeof')[1].trim().split(' ')[0];
-      condition = condition.replace(`typeof ${wordAfterTypeof}`, `useTypeOf(${wordAfterTypeof})`);
-    }
-    str += `<ng-container *ngIf="${condition}">`;
-    str += json.children
-      .map((item) => blockToAngular({ root, json: item, options, blockOptions }))
-      .join('\n');
-    str += `</ng-container>`;
-    // else condition
-    if (isMitosisNode(json.meta?.else)) {
-      str += `<ng-container *ngIf="!(${condition})">`;
-      str += blockToAngular({ root, json: json.meta.else, options, blockOptions });
-      str += `</ng-container>`;
-    }
-  } else if (json.name.includes('.')) {
-    const elSelector = childComponents.find((impName) => impName === json.name)
-      ? kebabCase(json.name)
-      : json.name;
-
-    let allProps = handleNgOutletBindings(json, options);
-    if (options.state === 'class-properties') {
-      const inputsPropsStateName = `mergedInputs_${hashCodeAsString(allProps)}`;
-      root.state[inputsPropsStateName] = {
-        code: '{}' + (options.typescript ? ' as any' : ''),
-        type: 'property',
-      };
-      if (!root.hooks.onInit?.code.includes(inputsPropsStateName)) {
-        addCodeToOnInit(root, `this.${inputsPropsStateName} = {${allProps}};`);
-      }
-      if (
-        !root.hooks.onUpdate
-          ?.map((hook) => hook.code)
-          .join('')
-          .includes(inputsPropsStateName)
-      ) {
-        addCodeToOnUpdate(root, `this.${inputsPropsStateName} = {${allProps}};`);
-      }
-      allProps = `${inputsPropsStateName}`;
-    } else {
-      allProps = `{ ${allProps} }`;
-    }
-
-    str += `<ng-container *ngComponentOutlet="
-      ${elSelector.replace('state.', '').replace('props.', '')};
-      inputs: ${allProps};
-      content: myContent;
-      ">  `;
-
-    str += `</ng-container>`;
-  } else {
-    let element,
-      classNames: string[] = [],
-      attributes;
-
-    const isComponent = childComponents.find((impName) => impName === json.name);
-
-    if (isComponent) {
-      const selector = json.meta.selector || blockOptions?.selector;
-      if (selector) {
-        try {
-          ({ element, classNames, attributes } = parse(`${selector}`));
-        } catch {
-          element = kebabCase(json.name);
-        }
-      } else {
-        element = kebabCase(json.name);
-      }
-    } else {
-      element = json.name;
-    }
-
-    str += `<${element} `;
-
-    // TODO: merge with existing classes/bindings
-    if (classNames.length) {
-      str += `class="${classNames.join(' ')}" `;
-    }
-
-    // TODO: Merge with existing properties
-    if (attributes) {
-      Object.entries(attributes).forEach(([key, value]) => {
-        if (value) {
-          str += `${key}=${JSON.stringify(value)} `;
-        } else {
-          str += `${key} `;
-        }
-      });
-    }
-
-    for (const key in json.properties) {
-      if (key.startsWith('$')) {
-        continue;
-      }
-      const value = json.properties[key];
-      str += ` ${key}="${value}" `;
-    }
-
-    for (const key in json.bindings) {
-      if (json.bindings[key]?.type === 'spread' && VALID_HTML_TAGS.includes(json.name.trim())) {
-        if (json.bindings[key]?.code === 'this') {
-          // if its an arbitrary { ...props } spread then we skip because Angular needs a named prop to be defined
-          continue;
-        }
-
-        let refName = '';
-        if (json.bindings['spreadRef']?.code) {
-          refName = json.bindings['spreadRef'].code;
-        } else {
-          const spreadRefIndex = root.meta._spreadRefIndex || 0;
-          refName = `elRef${spreadRefIndex}`;
-          root.meta._spreadRefIndex = (spreadRefIndex as number) + 1;
-          json.bindings['spreadRef'] = createSingleBinding({ code: refName });
-          root.refs[refName] = { argument: '' };
-        }
-        json.bindings['spreadRef'] = createSingleBinding({ code: refName });
-        root.refs[refName] = { argument: '' };
-        root.meta.onViewInit = (root.meta.onViewInit || { code: '' }) as BaseHook;
-        let spreadCode = '';
-        let changesCode = '';
-        if (json.bindings[key]?.code.startsWith('{')) {
-          json.meta._spreadStateRef = json.meta._spreadStateRef || 0;
-          const name = `${refName}_state_${json.meta._spreadStateRef}`;
-          json.meta._spreadStateRef = (json.meta._spreadStateRef as number) + 1;
-          makeReactiveState(root, name, `this.${name} = ${json.bindings[key]?.code};`);
-          spreadCode = `this.${name}`;
-          changesCode = `changes['${spreadCode.replace('this.', '')}']?.currentValue`;
-        } else {
-          spreadCode = `${json.bindings[key]?.code}`;
-          changesCode = `changes['${spreadCode.replace('this.', '')}']?.currentValue`;
-        }
-        if (!root.compileContext) {
-          root.compileContext = {
-            angular: {
-              hooks: {
-                ngAfterViewInit: {
-                  code: '',
-                },
-              },
-            },
-          };
-        }
-        root.compileContext.angular!.hooks!.ngAfterViewInit.code += `\nthis.setAttributes(this.${refName}?.nativeElement, ${spreadCode});`;
-        addCodeToOnUpdate(
-          root,
-          `this.setAttributes(this.${refName}?.nativeElement, ${spreadCode}${
-            changesCode ? `, ${changesCode}` : ''
-          });`,
-        );
-        if (!root.state['setAttributes']) {
-          root.state['setAttributes'] = {
-            code: HELPER_FUNCTIONS(options?.typescript).setAttributes as string,
-            type: 'method',
-          };
-        }
-      }
-    }
-
-    const stringifiedBindings = Object.entries(json.bindings)
-      .map(stringifyBinding(json, options, blockOptions))
-      .join('');
-
-    str += stringifiedBindings;
-    if (SELF_CLOSING_HTML_TAGS.has(json.name)) {
-      return str + ' />';
-    }
-    str += '>';
-
-    if (json.children) {
-      str += json.children
-        .map((item) => blockToAngular({ root, json: item, options, blockOptions }))
-        .join('\n');
-    }
-
-    str += `</${element}>`;
-  }
-  return str;
-};
-
 const traverseToGetAllDynamicComponents = (
   json: MitosisComponent,
   options: ToAngularOptions,
@@ -923,6 +459,23 @@ export const componentToAngular: TranspilerGenerator<ToAngularOptions> =
 
     const domRefs = getRefs(json);
     const jsRefs = Object.keys(json.refs).filter((ref) => !domRefs.has(ref));
+
+    const withAttributePassing = shouldAddAttributePassing(json, options);
+    const rootRef = getAddAttributePassingRef(json, options);
+    if (withAttributePassing) {
+      if (!domRefs.has(rootRef)) {
+        domRefs.add(rootRef);
+      }
+
+      addCodeNgAfterViewInit(
+        json,
+        `
+        const element: HTMLElement | null = this.${rootRef}?.nativeElement;
+        this.enableAttributePassing(element, "${dashCase(json.name)}");
+        `,
+      );
+    }
+
     const componentsUsed = Array.from(getComponentsUsed(json)).filter((item) => {
       return item.length && isUpperCase(item[0]) && !BUILT_IN_COMPONENTS.has(item);
     });
@@ -950,6 +503,7 @@ export const componentToAngular: TranspilerGenerator<ToAngularOptions> =
           root: json,
           json: item,
           options,
+          rootRef: withAttributePassing && rootRef === ROOT_REF ? rootRef : undefined, // only pass rootRef if it's not the default
           blockOptions: {
             childComponents,
             nativeAttributes: useMetadata?.angular?.nativeAttributes ?? [],
@@ -1158,6 +712,9 @@ export const componentToAngular: TranspilerGenerator<ToAngularOptions> =
             }) {}
           `
       }
+      
+      ${withAttributePassing ? getAttributePassingString(options.typescript) : ''}
+      
       ${
         !json.hooks.onMount.length && !dynamicComponents.size && !json.hooks.onInit?.code
           ? ''
diff --git a/packages/core/src/generators/stencil/blocks.ts b/packages/core/src/generators/stencil/blocks.ts
index 37c2967cce..ed763eec72 100644
--- a/packages/core/src/generators/stencil/blocks.ts
+++ b/packages/core/src/generators/stencil/blocks.ts
@@ -6,12 +6,19 @@ import { filterEmptyTextNodes } from '@/helpers/filter-empty-text-nodes';
 import { getForArguments } from '@/helpers/nodes/for';
 import { MitosisNode, checkIsForNode } from '@/types/mitosis-node';
 
-export const blockToStencil = (
-  json: MitosisNode,
-  options: ToStencilOptions = {},
-  insideJsx: boolean,
-  childComponents: string[],
-): string => {
+export const blockToStencil = ({
+  json,
+  options = {},
+  insideJsx,
+  rootRef,
+  childComponents,
+}: {
+  json: MitosisNode;
+  options: ToStencilOptions;
+  insideJsx?: boolean;
+  rootRef?: string;
+  childComponents: string[];
+}): string => {
   let blockName = childComponents.find((impName) => impName === json.name)
     ? getTagName(json.name, options)
     : json.name;
@@ -41,7 +48,7 @@ export const blockToStencil = (
       ${wrap ? '<Fragment>' : ''}
       ${json.children
         .filter(filterEmptyTextNodes)
-        .map((item) => blockToStencil(item, options, wrap, childComponents))
+        .map((item) => blockToStencil({ json: item, options, insideJsx: wrap, childComponents }))
         .join('\n')}
       ${wrap ? '</Fragment>' : ''}
     ))`;
@@ -56,13 +63,17 @@ export const blockToStencil = (
       ${wrap ? '<Fragment>' : ''}
       ${json.children
         .filter(filterEmptyTextNodes)
-        .map((item) => blockToStencil(item, options, wrap, childComponents))
+        .map((item) => blockToStencil({ json: item, options, insideJsx: wrap, childComponents }))
         .join('\n')}
       ${wrap ? '</Fragment>' : ''}
     ) : ${
       !json.meta.else
         ? 'null'
-        : `(${blockToStencil(json.meta.else as any, options, false, childComponents)})`
+        : `(${blockToStencil({
+            json: json.meta.else as any,
+            options,
+            childComponents,
+          })})`
     }`;
 
     if (insideJsx) {
@@ -92,8 +103,10 @@ export const blockToStencil = (
     if (type === 'spread') {
       str += ` {...(${code})} `;
     } else if (key === 'ref') {
-      // TODO: Add correct type here
-      str += ` ref={(el) => ${code.startsWith('this.') ? code : `this.${code}`} = el} `;
+      str += ` ref={(el:any) => {
+        ${rootRef ? `this.${rootRef} = el` : ''}
+        ${code.startsWith('this.') ? code : `this.${code}`} = el}
+      } `;
     } else if (isEvent(key)) {
       const asyncKeyword = json.bindings[key]?.async ? 'async ' : '';
       str += ` ${key}={${asyncKeyword}(${cusArgs.join(',')}) => ${code}} `;
@@ -107,7 +120,14 @@ export const blockToStencil = (
   str += '>';
   if (json.children) {
     str += json.children
-      .map((item) => blockToStencil(item, options, true, childComponents))
+      .map((item) =>
+        blockToStencil({
+          json: item,
+          options,
+          insideJsx: true,
+          childComponents,
+        }),
+      )
       .join('\n');
   }
 
diff --git a/packages/core/src/generators/stencil/component.ts b/packages/core/src/generators/stencil/component.ts
index e9609de63e..d1f18af27a 100644
--- a/packages/core/src/generators/stencil/component.ts
+++ b/packages/core/src/generators/stencil/component.ts
@@ -11,6 +11,7 @@ import {
 } from '@/generators/stencil/helpers';
 import { getCodeProcessorPlugins } from '@/generators/stencil/plugins/get-code-processor-plugins';
 import { ToStencilOptions } from '@/generators/stencil/types';
+import { dashCase } from '@/helpers/dash-case';
 import { dedent } from '@/helpers/dedent';
 import { fastClone } from '@/helpers/fast-clone';
 import { getChildComponents } from '@/helpers/get-child-components';
@@ -21,6 +22,12 @@ import { mapRefs } from '@/helpers/map-refs';
 import { initializeOptions } from '@/helpers/merge-options';
 import { stripMetaProperties } from '@/helpers/strip-meta-properties';
 import { collectCss } from '@/helpers/styles/collect-css';
+import {
+  getAddAttributePassingRef,
+  getAttributePassingString,
+  ROOT_REF,
+  shouldAddAttributePassing,
+} from '@/helpers/web-components/attribute-passing';
 import {
   runPostCodePlugins,
   runPostJsonPlugins,
@@ -79,15 +86,18 @@ export const componentToStencil: TranspilerGenerator<ToStencilOptions> =
       getters: true,
     });
 
-    const refs = json.refs
+    let refs = json.refs
       ? Object.entries(json.refs)
-          .map(([key, value]) => {
-            return `private ${key}!: ${value.typeParameter ?? 'HTMLElement'}`;
-          })
+          .map(([key, value]) => `private ${key}!: ${value.typeParameter ?? 'HTMLElement'};`)
           .join('\n')
       : '';
 
     const wrap = needsWrap(json.children);
+    const withAttributePassing = !wrap && shouldAddAttributePassing(json, options);
+    const rootRef = getAddAttributePassingRef(json, options);
+    if (withAttributePassing && !refs.includes(rootRef)) {
+      refs += `\nprivate ${rootRef}!: HTMLElement;`;
+    }
 
     if (options.prettier !== false) {
       try {
@@ -130,12 +140,17 @@ export const componentToStencil: TranspilerGenerator<ToStencilOptions> =
         ${getPropsAsCode(props, defaultProps, json.propsTypeRef)}
         ${dataString}
         ${methodsString}
-
-        ${
-          !json.hooks.onMount.length
-            ? ''
-            : `componentDidLoad() { ${stringifySingleScopeOnMount(json)} }`
-        }
+        
+        ${withAttributePassing ? getAttributePassingString(true) : ''}
+
+        ${`componentDidLoad() { 
+            ${
+              withAttributePassing
+                ? `this.enableAttributePassing(this.${rootRef}, "${dashCase(json.name)}");`
+                : ''
+            }
+            ${json.hooks.onMount.length ? stringifySingleScopeOnMount(json) : ''} 
+            }`}
         ${
           !json.hooks.onUnMount?.code
             ? ''
@@ -151,7 +166,15 @@ export const componentToStencil: TranspilerGenerator<ToStencilOptions> =
         return (${wrap ? '<Host>' : ''}
 
           ${json.children
-            .map((item) => blockToStencil(item, options, true, childComponents))
+            .map((item) =>
+              blockToStencil({
+                json: item,
+                options,
+                insideJsx: true,
+                childComponents,
+                rootRef: withAttributePassing && rootRef === ROOT_REF ? rootRef : undefined, // only pass rootRef if it's not the default
+              }),
+            )
             .join('\n')}
 
         ${wrap ? '</Host>' : ''})
diff --git a/packages/core/src/helpers/web-components/attribute-passing.ts b/packages/core/src/helpers/web-components/attribute-passing.ts
new file mode 100644
index 0000000000..db3e26cddb
--- /dev/null
+++ b/packages/core/src/helpers/web-components/attribute-passing.ts
@@ -0,0 +1,70 @@
+import { MitosisComponent } from '@/types/mitosis-component';
+import { BaseTranspilerOptions } from '@/types/transpiler';
+
+export const ROOT_REF = '_root';
+
+export const getAttributePassingString = (typescript?: boolean) => {
+  return (
+    '/**\n' +
+    ' * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n' +
+    ' * @param element  the ref for the component\n' +
+    ' * @param customElementSelector  the custom element like `my-component`\n' +
+    ' */\n' +
+    `private enableAttributePassing(element${
+      typescript ? ': HTMLElement | null' : ''
+    }, customElementSelector${typescript ? ': string' : ''}) {
+` +
+    '  const parent = element?.closest(customElementSelector);\n' +
+    '  if (element && parent) {\n' +
+    '    const attributes = parent.attributes;\n' +
+    '    for (let i = 0; i < attributes.length; i++) {\n' +
+    '      const attr = attributes.item(i);\n' +
+    "      if (attr && (attr.name.startsWith('data-') || attr.name.startsWith('aria-'))) {\n" +
+    '        element.setAttribute(attr.name, attr.value);\n' +
+    '        parent.removeAttribute(attr.name);\n' +
+    '      }\n' +
+    "      if (attr && attr.name === 'class') {\n" +
+    "        const isWebComponent = attr.value.includes('hydrated');\n" +
+    "        const value = attr.value.replace('hydrated', '').trim();\n" +
+    "        const currentClass = element.getAttribute('class');\n" +
+    "        element.setAttribute(attr.name, `${currentClass ? `${currentClass} ` : ''}${value}`);\n" +
+    '        if (isWebComponent) {\n' +
+    '          // Stencil is using this class for lazy loading component\n' +
+    "          parent.setAttribute('class', 'hydrated');\n" +
+    '        } else {\n' +
+    '          parent.removeAttribute(attr.name);\n' +
+    '        }\n' +
+    '      }\n' +
+    '    }\n' +
+    '  }\n' +
+    '};'
+  );
+};
+
+export const shouldAddAttributePassing = (
+  json: MitosisComponent,
+  options: BaseTranspilerOptions,
+) => {
+  const metaAttributePassingAsString = String(json.meta.useMetadata?.attributePassing?.enabled);
+
+  if (options.attributePassing?.enabled && metaAttributePassingAsString !== 'false') {
+    return false;
+  }
+
+  if (metaAttributePassingAsString === 'true') {
+    return true;
+  }
+
+  return options.attributePassing?.enabled;
+};
+
+export const getAddAttributePassingRef = (
+  json: MitosisComponent,
+  options: BaseTranspilerOptions,
+) => {
+  return (
+    json.meta.useMetadata?.attributePassing?.customRef ||
+    options.attributePassing?.customRef ||
+    ROOT_REF
+  );
+};
diff --git a/packages/core/src/types/metadata.ts b/packages/core/src/types/metadata.ts
index 4f3066e3d4..fa84c56785 100644
--- a/packages/core/src/types/metadata.ts
+++ b/packages/core/src/types/metadata.ts
@@ -15,7 +15,7 @@ import { SvelteMetadata } from '@/generators/svelte/types';
 import { SwiftMetadata } from '@/generators/swift/types';
 import { TaroMetadata } from '@/generators/taro/types';
 import { TemplateMetadata } from '@/generators/template/types';
-import { ReactMetadata, Target, VueMetadata } from '..';
+import { AttributePassingType, ReactMetadata, Target, VueMetadata } from '..';
 
 type Targets = typeof import('../targets').targets;
 type TargetOptions = {
@@ -32,6 +32,9 @@ export type ComponentMetadata = {
   forwardRef?: string;
   /** Enables shadowDom for web-components */
   isAttachedToShadowDom?: boolean;
+  /** Enables/disables attribute passing for frameworks with custom elements like angular and stencil */
+  attributePassing?: AttributePassingType;
+
   alpine?: AlpineMetadata;
   angular?: AngularMetadata;
   builder?: BuilderMetadata;
diff --git a/packages/core/src/types/transpiler.ts b/packages/core/src/types/transpiler.ts
index 980d4adbad..0d295e3d40 100644
--- a/packages/core/src/types/transpiler.ts
+++ b/packages/core/src/types/transpiler.ts
@@ -15,6 +15,11 @@ export type TranspilerGenerator<X extends BaseTranspilerOptions, Y = string> = (
   args?: X,
 ) => Transpiler<Y>;
 
+export type AttributePassingType = {
+  enabled: boolean;
+  customRef?: string;
+};
+
 export interface BaseTranspilerOptions {
   experimental?: { [key: string]: any };
   /**
@@ -29,6 +34,8 @@ export interface BaseTranspilerOptions {
    * Enable `typescript` output
    */
   typescript?: boolean;
+  /** Enables/disables attribute passing for frameworks with custom elements like angular and stencil */
+  attributePassing?: AttributePassingType;
   /**
    * Preserves explicit filename extensions in import statements.
    */