From d3c92419bff6dc147f345a4fa657e02dff8d99aa Mon Sep 17 00:00:00 2001
From: Emanuele Stoppa <my.burning@gmail.com>
Date: Tue, 27 Jan 2026 09:32:06 +0000
Subject: [PATCH 1/6] refactor(html): component parsing

---
 .../biome_cli/tests/cases/handle_vue_files.rs |  74 +++-
 ...pe_not_triggered_for_enum_in_template.snap |  11 +
 ...not_triggered_for_enum_in_template_v2.snap |  41 ++
 .../src/lint/a11y/no_autofocus.rs             |   4 +-
 .../src/lint/a11y/no_redundant_alt.rs         |   6 +-
 .../src/lint/a11y/no_svg_without_title.rs     |   4 +-
 .../src/lint/a11y/use_anchor_content.rs       |   5 +-
 .../src/lint/a11y/use_valid_lang.rs           |   6 +-
 .../lint/nursery/no_ambiguous_anchor_text.rs  |   8 +-
 .../src/lint/nursery/no_script_url.rs         |   3 +-
 .../src/lint/nursery/no_sync_scripts.rs       |   4 +-
 .../nursery/use_vue_hyphenated_attributes.rs  |   9 +-
 .../nursery/use_vue_valid_template_root.rs    |   4 +-
 .../src/lint/nursery/use_vue_vapor.rs         |   4 +-
 .../src/generated/node_factory.rs             |  28 +-
 .../src/generated/syntax_factory.rs           |  58 ++-
 crates/biome_html_formatter/src/generated.rs  | 126 ++++++
 .../src/html/any/component_object_name.rs     |  16 +
 .../biome_html_formatter/src/html/any/mod.rs  |   2 +
 .../src/html/any/tag_name.rs                  |  16 +
 .../src/html/auxiliary/attribute.rs           |   6 +-
 .../src/html/auxiliary/attribute_name.rs      |   6 +-
 .../src/html/auxiliary/component_name.rs      |  11 +
 .../src/html/auxiliary/element.rs             |  35 +-
 .../src/html/auxiliary/member_name.rs         |  16 +
 .../src/html/auxiliary/mod.rs                 |   2 +
 .../src/html/auxiliary/opening_element.rs     |   5 +-
 .../html/auxiliary/self_closing_element.rs    |   5 +-
 .../src/html/lists/attribute_list.rs          |   6 +-
 .../src/utils/css_display.rs                  |  20 +-
 .../src/utils/metadata.rs                     |  29 +-
 .../biome_html_formatter/tests/quick_test.rs  |  26 +-
 .../specs/html/astro/component.astro.snap     |   2 +-
 .../specs/html/svelte/component.svelte.snap   |   2 +-
 .../tests/specs/html/vue/component.vue.snap   |   2 +-
 crates/biome_html_parser/src/lexer/mod.rs     |   8 +-
 crates/biome_html_parser/src/syntax/mod.rs    |  80 +++-
 crates/biome_html_parser/src/token_source.rs  |   1 +
 .../vue/invalid-v-bind-shorthand.vue.snap     |   4 +-
 .../error/vue/invalid-v-on-shorthand.vue.snap |   4 +-
 .../html_specs/ok/astro/component.astro.snap  |   8 +-
 .../ok/astro/component_member.astro           |   1 +
 .../ok/astro/component_member.astro.snap      |  62 +++
 .../ok/astro/component_member_nested.astro    |   1 +
 .../astro/component_member_nested.astro.snap  |  82 ++++
 .../ok/astro/component_with_attributes.astro  |   4 +
 .../component_with_attributes.astro.snap      | 102 +++++
 .../html_specs/ok/astro/issue_7837.astro.snap |  34 +-
 .../multiple_nested_expression.astro.snap     |   4 +-
 .../non-spec-compliant-tag-name.html.snap     |  22 +-
 .../ok/svelte/await_catch_no_then.svelte.snap |  18 +-
 .../svelte/await_dynamic_import.svelte.snap   |   4 +-
 .../ok/svelte/complex_expressions.svelte.snap |  36 +-
 .../ok/svelte/component.svelte.snap           |   8 +-
 .../ok/svelte/component_member.svelte         |   1 +
 .../ok/svelte/component_member.svelte.snap    |  62 +++
 .../ok/svelte/component_member_nested.svelte  |   1 +
 .../component_member_nested.svelte.snap       |  82 ++++
 .../svelte/component_with_attributes.svelte   |   4 +
 .../component_with_attributes.svelte.snap     | 102 +++++
 .../html_specs/ok/vue/component.vue.snap      |   8 +-
 .../html_specs/ok/vue/component_member.vue    |   3 +
 .../ok/vue/component_member.vue.snap          |  98 +++++
 .../ok/vue/component_member_nested.vue        |   3 +
 .../ok/vue/component_member_nested.vue.snap   | 118 +++++
 .../ok/vue/component_member_simple.vue        |   1 +
 .../ok/vue/component_member_simple.vue.snap   |  62 +++
 .../ok/vue/component_with_attributes.vue      |   6 +
 .../ok/vue/component_with_attributes.vue.snap | 147 +++++++
 .../ok/vue/event-with-colon.vue.snap          |   4 +-
 .../html_specs/ok/vue/issue-8174.vue.snap     |   8 +-
 .../html_specs/ok/vue/v-bind-dynamic.vue.snap |   4 +-
 .../ok/vue/v-bind-shorthand.vue.snap          |   8 +-
 .../tests/html_specs/ok/vue/v-bind.vue.snap   |   8 +-
 .../html_specs/ok/vue/v-on-shorthand.vue.snap |   8 +-
 crates/biome_html_parser/tests/quick_test.rs  |  22 +-
 crates/biome_html_syntax/src/element_ext.rs   | 110 +++--
 .../biome_html_syntax/src/generated/kind.rs   |   2 +
 .../biome_html_syntax/src/generated/macros.rs |   8 +
 .../biome_html_syntax/src/generated/nodes.rs  | 405 +++++++++++++++++-
 .../src/generated/nodes_mut.rs                |  34 +-
 .../src/lint/style/use_import_type.rs         |   2 +-
 crates/biome_service/src/file_handlers/css.rs |   8 +-
 .../src/file_handlers/javascript.rs           |   2 +-
 crates/biome_service/src/file_handlers/mod.rs |   6 +-
 .../services/embedded_value_references.rs     | 128 +++++-
 crates/biome_service/src/workspace/server.rs  |  38 +-
 xtask/codegen/html.ungram                     |  26 +-
 xtask/codegen/src/html_kinds_src.rs           |   2 +
 89 files changed, 2390 insertions(+), 226 deletions(-)
 create mode 100644 crates/biome_cli/tests/snapshots/main_cases_handle_vue_files/use_import_type_not_triggered_for_enum_in_template_v2.snap
 create mode 100644 crates/biome_html_formatter/src/html/any/component_object_name.rs
 create mode 100644 crates/biome_html_formatter/src/html/any/tag_name.rs
 create mode 100644 crates/biome_html_formatter/src/html/auxiliary/component_name.rs
 create mode 100644 crates/biome_html_formatter/src/html/auxiliary/member_name.rs
 create mode 100644 crates/biome_html_parser/tests/html_specs/ok/astro/component_member.astro
 create mode 100644 crates/biome_html_parser/tests/html_specs/ok/astro/component_member.astro.snap
 create mode 100644 crates/biome_html_parser/tests/html_specs/ok/astro/component_member_nested.astro
 create mode 100644 crates/biome_html_parser/tests/html_specs/ok/astro/component_member_nested.astro.snap
 create mode 100644 crates/biome_html_parser/tests/html_specs/ok/astro/component_with_attributes.astro
 create mode 100644 crates/biome_html_parser/tests/html_specs/ok/astro/component_with_attributes.astro.snap
 create mode 100644 crates/biome_html_parser/tests/html_specs/ok/svelte/component_member.svelte
 create mode 100644 crates/biome_html_parser/tests/html_specs/ok/svelte/component_member.svelte.snap
 create mode 100644 crates/biome_html_parser/tests/html_specs/ok/svelte/component_member_nested.svelte
 create mode 100644 crates/biome_html_parser/tests/html_specs/ok/svelte/component_member_nested.svelte.snap
 create mode 100644 crates/biome_html_parser/tests/html_specs/ok/svelte/component_with_attributes.svelte
 create mode 100644 crates/biome_html_parser/tests/html_specs/ok/svelte/component_with_attributes.svelte.snap
 create mode 100644 crates/biome_html_parser/tests/html_specs/ok/vue/component_member.vue
 create mode 100644 crates/biome_html_parser/tests/html_specs/ok/vue/component_member.vue.snap
 create mode 100644 crates/biome_html_parser/tests/html_specs/ok/vue/component_member_nested.vue
 create mode 100644 crates/biome_html_parser/tests/html_specs/ok/vue/component_member_nested.vue.snap
 create mode 100644 crates/biome_html_parser/tests/html_specs/ok/vue/component_member_simple.vue
 create mode 100644 crates/biome_html_parser/tests/html_specs/ok/vue/component_member_simple.vue.snap
 create mode 100644 crates/biome_html_parser/tests/html_specs/ok/vue/component_with_attributes.vue
 create mode 100644 crates/biome_html_parser/tests/html_specs/ok/vue/component_with_attributes.vue.snap

diff --git a/crates/biome_cli/tests/cases/handle_vue_files.rs b/crates/biome_cli/tests/cases/handle_vue_files.rs
index bc6db8f15d0d..a7ad9b46e886 100644
--- a/crates/biome_cli/tests/cases/handle_vue_files.rs
+++ b/crates/biome_cli/tests/cases/handle_vue_files.rs
@@ -1140,6 +1140,47 @@ import Component from "./Component.vue"
     ));
 }
 
+#[test]
+fn use_import_type_not_triggered_for_enum_in_template() {
+    let fs = MemoryFileSystem::default();
+    let mut console = BufferConsole::default();
+
+    fs.insert(
+        "biome.json".into(),
+        r#"{ "html": { "linter": {"enabled": true}, "experimentalFullSupportEnabled": true } }"#
+            .as_bytes(),
+    );
+
+    let file = Utf8Path::new("file.vue");
+    fs.insert(
+        file.into(),
+        r#"<script setup lang="ts">
+import { Component, FooEnum } from './types';
+</script>
+<template>
+  <Component />
+  <div>{{ FooEnum.Foo }}</div>
+</template>"#
+            .as_bytes(),
+    );
+
+    let (fs, result) = run_cli(
+        fs,
+        &mut console,
+        Args::from(["lint", "--only=useImportType", file.as_str()].as_slice()),
+    );
+
+    assert!(result.is_ok(), "run_cli returned {result:?}");
+
+    assert_cli_snapshot(SnapshotPayload::new(
+        module_path!(),
+        "use_import_type_not_triggered_for_enum_in_template",
+        fs,
+        console,
+        result,
+    ));
+}
+
 const VUE_ENUM_IN_TEMPLATE: &str = r#"<script setup lang="ts">
 import { Component, FooEnum } from './types';
 </script>
@@ -1149,12 +1190,37 @@ import { Component, FooEnum } from './types';
 </template>"#;
 
 #[test]
-fn use_import_type_not_triggered_for_enum_in_template() {
+fn use_import_type_not_triggered_for_enum_in_template_v2() {
     let fs = MemoryFileSystem::default();
     let mut console = BufferConsole::default();
 
+    fs.insert(
+        "biome.json".into(),
+        r#"{ "html": { "linter": {"enabled": true}, "experimentalFullSupportEnabled": true } }"#
+            .as_bytes(),
+    );
+
     let file = Utf8Path::new("file.vue");
-    fs.insert(file.into(), VUE_ENUM_IN_TEMPLATE.as_bytes());
+    fs.insert(
+        file.into(),
+        r#"<script lang="ts">
+import { Avatar as AvatarPrimitive } from "bits-ui"; // <-- false positive
+import { cn } from "$lib/utils.js";
+
+let {
+	ref = $bindable(null),
+	class: className,
+}: AvatarPrimitive.FallbackProps = $props();
+</script>
+
+<!-- used as value here -->
+<AvatarPrimitive.Fallback
+	bind:ref
+	class="something nice"
+/>
+"#
+        .as_bytes(),
+    );
 
     let (fs, result) = run_cli(
         fs,
@@ -1162,11 +1228,9 @@ fn use_import_type_not_triggered_for_enum_in_template() {
         Args::from(["lint", "--only=useImportType", file.as_str()].as_slice()),
     );
 
-    assert!(result.is_ok(), "run_cli returned {result:?}");
-
     assert_cli_snapshot(SnapshotPayload::new(
         module_path!(),
-        "use_import_type_not_triggered_for_enum_in_template",
+        "use_import_type_not_triggered_for_enum_in_template_v2",
         fs,
         console,
         result,
diff --git a/crates/biome_cli/tests/snapshots/main_cases_handle_vue_files/use_import_type_not_triggered_for_enum_in_template.snap b/crates/biome_cli/tests/snapshots/main_cases_handle_vue_files/use_import_type_not_triggered_for_enum_in_template.snap
index acdb13469fda..4798b1f0e89b 100644
--- a/crates/biome_cli/tests/snapshots/main_cases_handle_vue_files/use_import_type_not_triggered_for_enum_in_template.snap
+++ b/crates/biome_cli/tests/snapshots/main_cases_handle_vue_files/use_import_type_not_triggered_for_enum_in_template.snap
@@ -2,6 +2,17 @@
 source: crates/biome_cli/tests/snap_test.rs
 expression: redactor(content)
 ---
+## `biome.json`
+
+```json
+{
+  "html": {
+    "linter": { "enabled": true },
+    "experimentalFullSupportEnabled": true
+  }
+}
+```
+
 ## `file.vue`
 
 ```vue
diff --git a/crates/biome_cli/tests/snapshots/main_cases_handle_vue_files/use_import_type_not_triggered_for_enum_in_template_v2.snap b/crates/biome_cli/tests/snapshots/main_cases_handle_vue_files/use_import_type_not_triggered_for_enum_in_template_v2.snap
new file mode 100644
index 000000000000..8cc82a8119f1
--- /dev/null
+++ b/crates/biome_cli/tests/snapshots/main_cases_handle_vue_files/use_import_type_not_triggered_for_enum_in_template_v2.snap
@@ -0,0 +1,41 @@
+---
+source: crates/biome_cli/tests/snap_test.rs
+expression: redactor(content)
+---
+## `biome.json`
+
+```json
+{
+  "html": {
+    "linter": { "enabled": true },
+    "experimentalFullSupportEnabled": true
+  }
+}
+```
+
+## `file.vue`
+
+```vue
+<script lang="ts">
+import { Avatar as AvatarPrimitive } from "bits-ui"; // <-- false positive
+import { cn } from "$lib/utils.js";
+
+let {
+	ref = $bindable(null),
+	class: className,
+}: AvatarPrimitive.FallbackProps = $props();
+</script>
+
+<!-- used as value here -->
+<AvatarPrimitive.Fallback
+	bind:ref
+	class="something nice"
+/>
+
+```
+
+# Emitted Messages
+
+```block
+Checked 1 file in <TIME>. No fixes applied.
+```
diff --git a/crates/biome_html_analyze/src/lint/a11y/no_autofocus.rs b/crates/biome_html_analyze/src/lint/a11y/no_autofocus.rs
index 116af8e8c369..d3fd6f3540ff 100644
--- a/crates/biome_html_analyze/src/lint/a11y/no_autofocus.rs
+++ b/crates/biome_html_analyze/src/lint/a11y/no_autofocus.rs
@@ -160,8 +160,8 @@ fn is_dialog_or_popover(tag_element: &AnyHtmlTagElement) -> bool {
     let is_dialog = tag_element
         .name()
         .ok()
-        .and_then(|n| n.value_token().ok())
-        .is_some_and(|token| token.text_trimmed().eq_ignore_ascii_case("dialog"));
+        .and_then(|n| n.token_text_trimmed())
+        .is_some_and(|text| text.eq_ignore_ascii_case("dialog"));
 
     is_dialog || tag_element.find_attribute_by_name("popover").is_some()
 }
diff --git a/crates/biome_html_analyze/src/lint/a11y/no_redundant_alt.rs b/crates/biome_html_analyze/src/lint/a11y/no_redundant_alt.rs
index 3b44c3098274..ed1468267035 100644
--- a/crates/biome_html_analyze/src/lint/a11y/no_redundant_alt.rs
+++ b/crates/biome_html_analyze/src/lint/a11y/no_redundant_alt.rs
@@ -56,9 +56,9 @@ impl Rule for NoRedundantAlt {
         let node = ctx.query();
         let file_source = ctx.source_type::<HtmlFileSource>();
 
-        let name = node.name().ok()?.value_token().ok()?;
-        if (file_source.is_html() && !name.text_trimmed().eq_ignore_ascii_case("img"))
-            || (!file_source.is_html() && name.text_trimmed() != "img")
+        let name = node.name().ok()?.token_text_trimmed()?;
+        if (file_source.is_html() && !name.eq_ignore_ascii_case("img"))
+            || (!file_source.is_html() && name != "img")
         {
             return None;
         }
diff --git a/crates/biome_html_analyze/src/lint/a11y/no_svg_without_title.rs b/crates/biome_html_analyze/src/lint/a11y/no_svg_without_title.rs
index 319b4593e680..5c31b07acecc 100644
--- a/crates/biome_html_analyze/src/lint/a11y/no_svg_without_title.rs
+++ b/crates/biome_html_analyze/src/lint/a11y/no_svg_without_title.rs
@@ -212,8 +212,8 @@ fn has_valid_title_element(html_child_list: &HtmlElementList) -> Option<bool> {
     let html_element = first_child.as_html_element()?;
     let opening_element = html_element.opening_element().ok()?;
     let name = opening_element.name().ok()?;
-    let name = name.value_token().ok()?;
-    let has_title_name = name.text_trimmed() == "title";
+    let name_text = name.token_text_trimmed()?;
+    let has_title_name = name_text == "title";
     if !has_title_name {
         return Some(false);
     }
diff --git a/crates/biome_html_analyze/src/lint/a11y/use_anchor_content.rs b/crates/biome_html_analyze/src/lint/a11y/use_anchor_content.rs
index ca6daae001f4..0dfb042feaeb 100644
--- a/crates/biome_html_analyze/src/lint/a11y/use_anchor_content.rs
+++ b/crates/biome_html_analyze/src/lint/a11y/use_anchor_content.rs
@@ -208,10 +208,9 @@ fn has_accessible_content(html_child_list: &HtmlElementList) -> bool {
                 return true;
             }
 
-            let tag_name = element.name().ok().and_then(|n| n.value_token().ok());
-            let tag_text = tag_name.as_ref().map(|t| t.text_trimmed());
+            let tag_text = element.name().ok().and_then(|n| n.token_text_trimmed());
 
-            match tag_text {
+            match tag_text.as_ref().map(|t| t.as_ref()) {
                 Some(name) if name.eq_ignore_ascii_case("img") => {
                     html_self_closing_element_has_non_empty_attribute(element, "alt")
                 }
diff --git a/crates/biome_html_analyze/src/lint/a11y/use_valid_lang.rs b/crates/biome_html_analyze/src/lint/a11y/use_valid_lang.rs
index 354dc49d14e5..417305089a85 100644
--- a/crates/biome_html_analyze/src/lint/a11y/use_valid_lang.rs
+++ b/crates/biome_html_analyze/src/lint/a11y/use_valid_lang.rs
@@ -62,12 +62,12 @@ impl Rule for UseValidLang {
 
     fn run(ctx: &RuleContext<Self>) -> Self::Signals {
         let node = ctx.query();
-        let element_text = node.name().ok()?.value_token().ok()?;
+        let element_text = node.name().ok()?.token_text_trimmed()?;
         let source_type = ctx.source_type::<HtmlFileSource>();
         let matches_tag = if source_type.is_html() {
-            element_text.text_trimmed().eq_ignore_ascii_case("html")
+            element_text.eq_ignore_ascii_case("html")
         } else {
-            element_text.text_trimmed() == "html"
+            element_text == "html"
         };
         if !matches_tag {
             return None;
diff --git a/crates/biome_html_analyze/src/lint/nursery/no_ambiguous_anchor_text.rs b/crates/biome_html_analyze/src/lint/nursery/no_ambiguous_anchor_text.rs
index 0aa05d8aebfa..d22abe51dfb9 100644
--- a/crates/biome_html_analyze/src/lint/nursery/no_ambiguous_anchor_text.rs
+++ b/crates/biome_html_analyze/src/lint/nursery/no_ambiguous_anchor_text.rs
@@ -75,8 +75,8 @@ impl Rule for NoAmbiguousAnchorText {
         let words = ctx.options().words();
 
         let name = binding.name().ok()?;
-        let value_token = name.value_token().ok()?;
-        if value_token.text_trimmed() != "a" {
+        let name_text = name.token_text_trimmed()?;
+        if name_text != "a" {
             return None;
         }
 
@@ -120,8 +120,8 @@ fn get_aria_label(node: &AnyHtmlTagElement) -> Option<String> {
 
 fn get_img_alt(node: &AnyHtmlTagElement) -> Option<String> {
     let name = node.name().ok()?;
-    let value_token = name.value_token().ok()?;
-    if value_token.text_trimmed() != "img" {
+    let name_text = name.token_text_trimmed()?;
+    if name_text != "img" {
         return None;
     }
 
diff --git a/crates/biome_html_analyze/src/lint/nursery/no_script_url.rs b/crates/biome_html_analyze/src/lint/nursery/no_script_url.rs
index 17090b065cb5..b36f4c1f5725 100644
--- a/crates/biome_html_analyze/src/lint/nursery/no_script_url.rs
+++ b/crates/biome_html_analyze/src/lint/nursery/no_script_url.rs
@@ -63,8 +63,7 @@ impl Rule for NoScriptUrl {
 
         // Only check <a> elements for HTML (unlike JSX where components/custom elements exist)
         let name = element.name().ok()?;
-        let token = name.value_token().ok()?;
-        let tag = token.text_trimmed();
+        let tag = name.token_text_trimmed()?;
         if !tag.eq_ignore_ascii_case("a") {
             return None;
         }
diff --git a/crates/biome_html_analyze/src/lint/nursery/no_sync_scripts.rs b/crates/biome_html_analyze/src/lint/nursery/no_sync_scripts.rs
index 14bb3a2b9bdc..339ee42b7467 100644
--- a/crates/biome_html_analyze/src/lint/nursery/no_sync_scripts.rs
+++ b/crates/biome_html_analyze/src/lint/nursery/no_sync_scripts.rs
@@ -46,8 +46,8 @@ impl Rule for NoSyncScripts {
         let binding = ctx.query();
 
         let name = binding.name().ok()?;
-        let value_token = name.value_token().ok()?;
-        if value_token.text_trimmed() != "script" {
+        let name_text = name.token_text_trimmed()?;
+        if name_text != "script" {
             return None;
         }
 
diff --git a/crates/biome_html_analyze/src/lint/nursery/use_vue_hyphenated_attributes.rs b/crates/biome_html_analyze/src/lint/nursery/use_vue_hyphenated_attributes.rs
index 145a69276c29..581e0e0a1654 100644
--- a/crates/biome_html_analyze/src/lint/nursery/use_vue_hyphenated_attributes.rs
+++ b/crates/biome_html_analyze/src/lint/nursery/use_vue_hyphenated_attributes.rs
@@ -4,7 +4,7 @@ use biome_analyze::{
 };
 use biome_console::markup;
 use biome_html_syntax::{
-    AnyHtmlAttribute, HtmlAttributeList, HtmlOpeningElement, HtmlSelfClosingElement, HtmlTagName,
+    AnyHtmlAttribute, AnyHtmlTagName, HtmlAttributeList, HtmlOpeningElement, HtmlSelfClosingElement,
 };
 use biome_rowan::{AstNode, AstNodeList, SyntaxResult, TokenText, declare_node_union};
 use biome_rule_options::use_vue_hyphenated_attributes::UseVueHyphenatedAttributesOptions;
@@ -113,8 +113,9 @@ impl Rule for UseVueHyphenatedAttributes {
         let node = ctx.query();
 
         if let Some(ignore_tags) = ctx.options().ignore_tags.as_ref()
-            && let Ok(tag_name) = node.name().and_then(|name| name.value_token())
-            && ignore_tags.contains(tag_name.text_trimmed())
+            && let Ok(tag_name) = node.name()
+            && let Some(tag_name_text) = tag_name.token_text_trimmed()
+            && ignore_tags.contains(tag_name_text.as_ref())
         {
             return Box::new([]);
         }
@@ -227,7 +228,7 @@ impl Rule for UseVueHyphenatedAttributes {
 }
 
 impl AnyTagWithAttributes {
-    fn name(&self) -> SyntaxResult<HtmlTagName> {
+    fn name(&self) -> SyntaxResult<AnyHtmlTagName> {
         match self {
             Self::HtmlOpeningElement(node) => node.name(),
             Self::HtmlSelfClosingElement(node) => node.name(),
diff --git a/crates/biome_html_analyze/src/lint/nursery/use_vue_valid_template_root.rs b/crates/biome_html_analyze/src/lint/nursery/use_vue_valid_template_root.rs
index a280becf3759..d2610cce146a 100644
--- a/crates/biome_html_analyze/src/lint/nursery/use_vue_valid_template_root.rs
+++ b/crates/biome_html_analyze/src/lint/nursery/use_vue_valid_template_root.rs
@@ -69,8 +69,8 @@ impl Rule for UseVueValidTemplateRoot {
                 el.opening_element()
                     .ok()
                     .and_then(|op| op.name().ok())
-                    .and_then(|name| name.value_token().ok())
-                    .is_some_and(|tok| tok.text_trimmed() == "template")
+                    .and_then(|name| name.token_text_trimmed())
+                    .is_some_and(|text| text == "template")
             })?;
 
         let has_src = element.find_attribute_by_name("src").is_some();
diff --git a/crates/biome_html_analyze/src/lint/nursery/use_vue_vapor.rs b/crates/biome_html_analyze/src/lint/nursery/use_vue_vapor.rs
index 692036fdf691..0e1c78e367a0 100644
--- a/crates/biome_html_analyze/src/lint/nursery/use_vue_vapor.rs
+++ b/crates/biome_html_analyze/src/lint/nursery/use_vue_vapor.rs
@@ -60,8 +60,8 @@ impl Rule for UseVueVapor {
         let opening = ctx.query();
 
         let name = opening.name().ok()?;
-        let name_token = name.value_token().ok()?;
-        if !name_token.text_trimmed().eq_ignore_ascii_case("script") {
+        let name_text = name.token_text_trimmed()?;
+        if !name_text.eq_ignore_ascii_case("script") {
             return None;
         }
 
diff --git a/crates/biome_html_factory/src/generated/node_factory.rs b/crates/biome_html_factory/src/generated/node_factory.rs
index 46587e785628..2ff3ca5c4bc4 100644
--- a/crates/biome_html_factory/src/generated/node_factory.rs
+++ b/crates/biome_html_factory/src/generated/node_factory.rs
@@ -101,7 +101,7 @@ pub fn html_cdata_section(
 pub fn html_closing_element(
     l_angle_token: SyntaxToken,
     slash_token: SyntaxToken,
-    name: HtmlTagName,
+    name: AnyHtmlTagName,
     r_angle_token: SyntaxToken,
 ) -> HtmlClosingElement {
     HtmlClosingElement::unwrap_cast(SyntaxNode::new_detached(
@@ -114,6 +114,12 @@ pub fn html_closing_element(
         ],
     ))
 }
+pub fn html_component_name(value_token: SyntaxToken) -> HtmlComponentName {
+    HtmlComponentName::unwrap_cast(SyntaxNode::new_detached(
+        HtmlSyntaxKind::HTML_COMPONENT_NAME,
+        [Some(SyntaxElement::Token(value_token))],
+    ))
+}
 pub fn html_content(value_token: SyntaxToken) -> HtmlContent {
     HtmlContent::unwrap_cast(SyntaxNode::new_detached(
         HtmlSyntaxKind::HTML_CONTENT,
@@ -216,9 +222,23 @@ pub fn html_embedded_content(value_token: SyntaxToken) -> HtmlEmbeddedContent {
         [Some(SyntaxElement::Token(value_token))],
     ))
 }
+pub fn html_member_name(
+    object: AnyHtmlComponentObjectName,
+    dot_token: SyntaxToken,
+    member: HtmlTagName,
+) -> HtmlMemberName {
+    HtmlMemberName::unwrap_cast(SyntaxNode::new_detached(
+        HtmlSyntaxKind::HTML_MEMBER_NAME,
+        [
+            Some(SyntaxElement::Node(object.into_syntax())),
+            Some(SyntaxElement::Token(dot_token)),
+            Some(SyntaxElement::Node(member.into_syntax())),
+        ],
+    ))
+}
 pub fn html_opening_element(
     l_angle_token: SyntaxToken,
-    name: HtmlTagName,
+    name: AnyHtmlTagName,
     attributes: HtmlAttributeList,
     r_angle_token: SyntaxToken,
 ) -> HtmlOpeningElement {
@@ -278,7 +298,7 @@ impl HtmlRootBuilder {
 }
 pub fn html_self_closing_element(
     l_angle_token: SyntaxToken,
-    name: HtmlTagName,
+    name: AnyHtmlTagName,
     attributes: HtmlAttributeList,
     r_angle_token: SyntaxToken,
 ) -> HtmlSelfClosingElementBuilder {
@@ -292,7 +312,7 @@ pub fn html_self_closing_element(
 }
 pub struct HtmlSelfClosingElementBuilder {
     l_angle_token: SyntaxToken,
-    name: HtmlTagName,
+    name: AnyHtmlTagName,
     attributes: HtmlAttributeList,
     r_angle_token: SyntaxToken,
     slash_token: Option<SyntaxToken>,
diff --git a/crates/biome_html_factory/src/generated/syntax_factory.rs b/crates/biome_html_factory/src/generated/syntax_factory.rs
index daa1c90a6e2d..cae37e3be3ec 100644
--- a/crates/biome_html_factory/src/generated/syntax_factory.rs
+++ b/crates/biome_html_factory/src/generated/syntax_factory.rs
@@ -199,7 +199,7 @@ impl SyntaxFactory for HtmlSyntaxFactory {
                 }
                 slots.next_slot();
                 if let Some(element) = &current_element
-                    && HtmlTagName::can_cast(element.kind())
+                    && AnyHtmlTagName::can_cast(element.kind())
                 {
                     slots.mark_present();
                     current_element = elements.next();
@@ -220,6 +220,25 @@ impl SyntaxFactory for HtmlSyntaxFactory {
                 }
                 slots.into_node(HTML_CLOSING_ELEMENT, children)
             }
+            HTML_COMPONENT_NAME => {
+                let mut elements = (&children).into_iter();
+                let mut slots: RawNodeSlots<1usize> = RawNodeSlots::default();
+                let mut current_element = elements.next();
+                if let Some(element) = &current_element
+                    && element.kind() == HTML_LITERAL
+                {
+                    slots.mark_present();
+                    current_element = elements.next();
+                }
+                slots.next_slot();
+                if current_element.is_some() {
+                    return RawSyntaxNode::new(
+                        HTML_COMPONENT_NAME.to_bogus(),
+                        children.into_iter().map(Some),
+                    );
+                }
+                slots.into_node(HTML_COMPONENT_NAME, children)
+            }
             HTML_CONTENT => {
                 let mut elements = (&children).into_iter();
                 let mut slots: RawNodeSlots<1usize> = RawNodeSlots::default();
@@ -392,6 +411,39 @@ impl SyntaxFactory for HtmlSyntaxFactory {
                 }
                 slots.into_node(HTML_EMBEDDED_CONTENT, children)
             }
+            HTML_MEMBER_NAME => {
+                let mut elements = (&children).into_iter();
+                let mut slots: RawNodeSlots<3usize> = RawNodeSlots::default();
+                let mut current_element = elements.next();
+                if let Some(element) = &current_element
+                    && AnyHtmlComponentObjectName::can_cast(element.kind())
+                {
+                    slots.mark_present();
+                    current_element = elements.next();
+                }
+                slots.next_slot();
+                if let Some(element) = &current_element
+                    && element.kind() == T ! [.]
+                {
+                    slots.mark_present();
+                    current_element = elements.next();
+                }
+                slots.next_slot();
+                if let Some(element) = &current_element
+                    && HtmlTagName::can_cast(element.kind())
+                {
+                    slots.mark_present();
+                    current_element = elements.next();
+                }
+                slots.next_slot();
+                if current_element.is_some() {
+                    return RawSyntaxNode::new(
+                        HTML_MEMBER_NAME.to_bogus(),
+                        children.into_iter().map(Some),
+                    );
+                }
+                slots.into_node(HTML_MEMBER_NAME, children)
+            }
             HTML_OPENING_ELEMENT => {
                 let mut elements = (&children).into_iter();
                 let mut slots: RawNodeSlots<4usize> = RawNodeSlots::default();
@@ -404,7 +456,7 @@ impl SyntaxFactory for HtmlSyntaxFactory {
                 }
                 slots.next_slot();
                 if let Some(element) = &current_element
-                    && HtmlTagName::can_cast(element.kind())
+                    && AnyHtmlTagName::can_cast(element.kind())
                 {
                     slots.mark_present();
                     current_element = elements.next();
@@ -491,7 +543,7 @@ impl SyntaxFactory for HtmlSyntaxFactory {
                 }
                 slots.next_slot();
                 if let Some(element) = &current_element
-                    && HtmlTagName::can_cast(element.kind())
+                    && AnyHtmlTagName::can_cast(element.kind())
                 {
                     slots.mark_present();
                     current_element = elements.next();
diff --git a/crates/biome_html_formatter/src/generated.rs b/crates/biome_html_formatter/src/generated.rs
index bd41ed902bdb..3010205ee9db 100644
--- a/crates/biome_html_formatter/src/generated.rs
+++ b/crates/biome_html_formatter/src/generated.rs
@@ -266,6 +266,44 @@ impl IntoFormat<HtmlFormatContext> for biome_html_syntax::HtmlClosingElement {
         )
     }
 }
+impl FormatRule<biome_html_syntax::HtmlComponentName>
+    for crate::html::auxiliary::component_name::FormatHtmlComponentName
+{
+    type Context = HtmlFormatContext;
+    #[inline(always)]
+    fn fmt(
+        &self,
+        node: &biome_html_syntax::HtmlComponentName,
+        f: &mut HtmlFormatter,
+    ) -> FormatResult<()> {
+        FormatNodeRule::<biome_html_syntax::HtmlComponentName>::fmt(self, node, f)
+    }
+}
+impl AsFormat<HtmlFormatContext> for biome_html_syntax::HtmlComponentName {
+    type Format<'a> = FormatRefWithRule<
+        'a,
+        biome_html_syntax::HtmlComponentName,
+        crate::html::auxiliary::component_name::FormatHtmlComponentName,
+    >;
+    fn format(&self) -> Self::Format<'_> {
+        FormatRefWithRule::new(
+            self,
+            crate::html::auxiliary::component_name::FormatHtmlComponentName::default(),
+        )
+    }
+}
+impl IntoFormat<HtmlFormatContext> for biome_html_syntax::HtmlComponentName {
+    type Format = FormatOwnedWithRule<
+        biome_html_syntax::HtmlComponentName,
+        crate::html::auxiliary::component_name::FormatHtmlComponentName,
+    >;
+    fn into_format(self) -> Self::Format {
+        FormatOwnedWithRule::new(
+            self,
+            crate::html::auxiliary::component_name::FormatHtmlComponentName::default(),
+        )
+    }
+}
 impl FormatRule<biome_html_syntax::HtmlContent>
     for crate::html::auxiliary::content::FormatHtmlContent
 {
@@ -458,6 +496,44 @@ impl IntoFormat<HtmlFormatContext> for biome_html_syntax::HtmlEmbeddedContent {
         )
     }
 }
+impl FormatRule<biome_html_syntax::HtmlMemberName>
+    for crate::html::auxiliary::member_name::FormatHtmlMemberName
+{
+    type Context = HtmlFormatContext;
+    #[inline(always)]
+    fn fmt(
+        &self,
+        node: &biome_html_syntax::HtmlMemberName,
+        f: &mut HtmlFormatter,
+    ) -> FormatResult<()> {
+        FormatNodeRule::<biome_html_syntax::HtmlMemberName>::fmt(self, node, f)
+    }
+}
+impl AsFormat<HtmlFormatContext> for biome_html_syntax::HtmlMemberName {
+    type Format<'a> = FormatRefWithRule<
+        'a,
+        biome_html_syntax::HtmlMemberName,
+        crate::html::auxiliary::member_name::FormatHtmlMemberName,
+    >;
+    fn format(&self) -> Self::Format<'_> {
+        FormatRefWithRule::new(
+            self,
+            crate::html::auxiliary::member_name::FormatHtmlMemberName::default(),
+        )
+    }
+}
+impl IntoFormat<HtmlFormatContext> for biome_html_syntax::HtmlMemberName {
+    type Format = FormatOwnedWithRule<
+        biome_html_syntax::HtmlMemberName,
+        crate::html::auxiliary::member_name::FormatHtmlMemberName,
+    >;
+    fn into_format(self) -> Self::Format {
+        FormatOwnedWithRule::new(
+            self,
+            crate::html::auxiliary::member_name::FormatHtmlMemberName::default(),
+        )
+    }
+}
 impl FormatRule<biome_html_syntax::HtmlOpeningElement>
     for crate::html::auxiliary::opening_element::FormatHtmlOpeningElement
 {
@@ -3226,6 +3302,31 @@ impl IntoFormat<HtmlFormatContext> for biome_html_syntax::AnyHtmlAttributeInitia
         )
     }
 }
+impl AsFormat<HtmlFormatContext> for biome_html_syntax::AnyHtmlComponentObjectName {
+    type Format<'a> = FormatRefWithRule<
+        'a,
+        biome_html_syntax::AnyHtmlComponentObjectName,
+        crate::html::any::component_object_name::FormatAnyHtmlComponentObjectName,
+    >;
+    fn format(&self) -> Self::Format<'_> {
+        FormatRefWithRule::new(
+            self,
+            crate::html::any::component_object_name::FormatAnyHtmlComponentObjectName::default(),
+        )
+    }
+}
+impl IntoFormat<HtmlFormatContext> for biome_html_syntax::AnyHtmlComponentObjectName {
+    type Format = FormatOwnedWithRule<
+        biome_html_syntax::AnyHtmlComponentObjectName,
+        crate::html::any::component_object_name::FormatAnyHtmlComponentObjectName,
+    >;
+    fn into_format(self) -> Self::Format {
+        FormatOwnedWithRule::new(
+            self,
+            crate::html::any::component_object_name::FormatAnyHtmlComponentObjectName::default(),
+        )
+    }
+}
 impl AsFormat<HtmlFormatContext> for biome_html_syntax::AnyHtmlContent {
     type Format<'a> = FormatRefWithRule<
         'a,
@@ -3276,6 +3377,31 @@ impl IntoFormat<HtmlFormatContext> for biome_html_syntax::AnyHtmlElement {
         )
     }
 }
+impl AsFormat<HtmlFormatContext> for biome_html_syntax::AnyHtmlTagName {
+    type Format<'a> = FormatRefWithRule<
+        'a,
+        biome_html_syntax::AnyHtmlTagName,
+        crate::html::any::tag_name::FormatAnyHtmlTagName,
+    >;
+    fn format(&self) -> Self::Format<'_> {
+        FormatRefWithRule::new(
+            self,
+            crate::html::any::tag_name::FormatAnyHtmlTagName::default(),
+        )
+    }
+}
+impl IntoFormat<HtmlFormatContext> for biome_html_syntax::AnyHtmlTagName {
+    type Format = FormatOwnedWithRule<
+        biome_html_syntax::AnyHtmlTagName,
+        crate::html::any::tag_name::FormatAnyHtmlTagName,
+    >;
+    fn into_format(self) -> Self::Format {
+        FormatOwnedWithRule::new(
+            self,
+            crate::html::any::tag_name::FormatAnyHtmlTagName::default(),
+        )
+    }
+}
 impl AsFormat<HtmlFormatContext> for biome_html_syntax::AnyHtmlTextExpression {
     type Format<'a> = FormatRefWithRule<
         'a,
diff --git a/crates/biome_html_formatter/src/html/any/component_object_name.rs b/crates/biome_html_formatter/src/html/any/component_object_name.rs
new file mode 100644
index 000000000000..1b8b54f4dc8e
--- /dev/null
+++ b/crates/biome_html_formatter/src/html/any/component_object_name.rs
@@ -0,0 +1,16 @@
+//! This is a generated file. Don't modify it by hand! Run 'cargo codegen formatter' to re-generate the file.
+
+use crate::prelude::*;
+use biome_html_syntax::AnyHtmlComponentObjectName;
+#[derive(Debug, Clone, Default)]
+pub(crate) struct FormatAnyHtmlComponentObjectName;
+impl FormatRule<AnyHtmlComponentObjectName> for FormatAnyHtmlComponentObjectName {
+    type Context = HtmlFormatContext;
+    fn fmt(&self, node: &AnyHtmlComponentObjectName, f: &mut HtmlFormatter) -> FormatResult<()> {
+        match node {
+            AnyHtmlComponentObjectName::HtmlComponentName(node) => node.format().fmt(f),
+            AnyHtmlComponentObjectName::HtmlMemberName(node) => node.format().fmt(f),
+            AnyHtmlComponentObjectName::HtmlTagName(node) => node.format().fmt(f),
+        }
+    }
+}
diff --git a/crates/biome_html_formatter/src/html/any/mod.rs b/crates/biome_html_formatter/src/html/any/mod.rs
index 74685e17f3df..5a6979036edf 100644
--- a/crates/biome_html_formatter/src/html/any/mod.rs
+++ b/crates/biome_html_formatter/src/html/any/mod.rs
@@ -2,6 +2,8 @@
 
 pub(crate) mod attribute;
 pub(crate) mod attribute_initializer;
+pub(crate) mod component_object_name;
 pub(crate) mod content;
 pub(crate) mod element;
+pub(crate) mod tag_name;
 pub(crate) mod text_expression;
diff --git a/crates/biome_html_formatter/src/html/any/tag_name.rs b/crates/biome_html_formatter/src/html/any/tag_name.rs
new file mode 100644
index 000000000000..59577c80ab2e
--- /dev/null
+++ b/crates/biome_html_formatter/src/html/any/tag_name.rs
@@ -0,0 +1,16 @@
+//! This is a generated file. Don't modify it by hand! Run 'cargo codegen formatter' to re-generate the file.
+
+use crate::prelude::*;
+use biome_html_syntax::AnyHtmlTagName;
+#[derive(Debug, Clone, Default)]
+pub(crate) struct FormatAnyHtmlTagName;
+impl FormatRule<AnyHtmlTagName> for FormatAnyHtmlTagName {
+    type Context = HtmlFormatContext;
+    fn fmt(&self, node: &AnyHtmlTagName, f: &mut HtmlFormatter) -> FormatResult<()> {
+        match node {
+            AnyHtmlTagName::HtmlComponentName(node) => node.format().fmt(f),
+            AnyHtmlTagName::HtmlMemberName(node) => node.format().fmt(f),
+            AnyHtmlTagName::HtmlTagName(node) => node.format().fmt(f),
+        }
+    }
+}
diff --git a/crates/biome_html_formatter/src/html/auxiliary/attribute.rs b/crates/biome_html_formatter/src/html/auxiliary/attribute.rs
index d620e90ab3fc..1220e8d0e3ec 100644
--- a/crates/biome_html_formatter/src/html/auxiliary/attribute.rs
+++ b/crates/biome_html_formatter/src/html/auxiliary/attribute.rs
@@ -8,7 +8,7 @@ use crate::{
 };
 use biome_formatter::{FormatContext, FormatRuleWithOptions, write};
 use biome_html_syntax::{
-    AnyHtmlAttributeInitializer, HtmlAttribute, HtmlAttributeFields, HtmlTagName,
+    AnyHtmlAttributeInitializer, AnyHtmlTagName, HtmlAttribute, HtmlAttributeFields,
 };
 use std::fmt::Debug;
 
@@ -18,7 +18,7 @@ pub(crate) struct FormatHtmlAttribute {
     pub is_canonical_html_element: bool,
 
     /// The name of the tag this attribute belongs to.
-    pub tag_name: Option<HtmlTagName>,
+    pub tag_name: Option<AnyHtmlTagName>,
 
     /// Whether it should be formatted in compact mode. In compact mode, all tokens and children
     /// are removed
@@ -30,7 +30,7 @@ pub(crate) struct FormatHtmlAttributeOptions {
     pub is_canonical_html_element: bool,
 
     /// The name of the tag this attribute belongs to.
-    pub tag_name: Option<HtmlTagName>,
+    pub tag_name: Option<AnyHtmlTagName>,
 
     /// Whether it should be formatted in compact mode. In compact mode, all tokens and children
     /// are removed
diff --git a/crates/biome_html_formatter/src/html/auxiliary/attribute_name.rs b/crates/biome_html_formatter/src/html/auxiliary/attribute_name.rs
index 387071a16f2c..7460e9d1276d 100644
--- a/crates/biome_html_formatter/src/html/auxiliary/attribute_name.rs
+++ b/crates/biome_html_formatter/src/html/auxiliary/attribute_name.rs
@@ -3,7 +3,7 @@ use crate::{
     utils::{formatters::FormatTokenAsLowercase, metadata::is_canonical_html_attribute},
 };
 use biome_formatter::{FormatRuleWithOptions, write};
-use biome_html_syntax::{HtmlAttributeName, HtmlAttributeNameFields, HtmlTagName};
+use biome_html_syntax::{AnyHtmlTagName, HtmlAttributeName, HtmlAttributeNameFields};
 
 #[derive(Debug, Clone, Default)]
 pub(crate) struct FormatHtmlAttributeName {
@@ -11,7 +11,7 @@ pub(crate) struct FormatHtmlAttributeName {
     pub is_canonical_html_element: bool,
 
     /// The name of the tag this attribute belongs to.
-    pub tag_name: Option<HtmlTagName>,
+    pub tag_name: Option<AnyHtmlTagName>,
 
     /// Whether it should be formatted in compact mode. In compact mode, all tokens and children
     /// are removed
@@ -23,7 +23,7 @@ pub(crate) struct FormatHtmlAttributeNameOptions {
     pub is_canonical_html_element: bool,
 
     /// The name of the tag this attribute belongs to.
-    pub tag_name: Option<HtmlTagName>,
+    pub tag_name: Option<AnyHtmlTagName>,
 
     /// Whether it should be formatted in compact mode. In compact mode, all tokens and children
     /// are removed
diff --git a/crates/biome_html_formatter/src/html/auxiliary/component_name.rs b/crates/biome_html_formatter/src/html/auxiliary/component_name.rs
new file mode 100644
index 000000000000..fc22a4f69430
--- /dev/null
+++ b/crates/biome_html_formatter/src/html/auxiliary/component_name.rs
@@ -0,0 +1,11 @@
+use crate::prelude::*;
+use biome_html_syntax::{HtmlComponentName, HtmlComponentNameFields};
+#[derive(Debug, Clone, Default)]
+pub(crate) struct FormatHtmlComponentName;
+impl FormatNodeRule<HtmlComponentName> for FormatHtmlComponentName {
+    fn fmt_fields(&self, node: &HtmlComponentName, f: &mut HtmlFormatter) -> FormatResult<()> {
+        let HtmlComponentNameFields { value_token } = node.as_fields();
+
+        value_token.format().fmt(f)
+    }
+}
diff --git a/crates/biome_html_formatter/src/html/auxiliary/element.rs b/crates/biome_html_formatter/src/html/auxiliary/element.rs
index 021a84891015..3e610e874c77 100644
--- a/crates/biome_html_formatter/src/html/auxiliary/element.rs
+++ b/crates/biome_html_formatter/src/html/auxiliary/element.rs
@@ -4,9 +4,10 @@ use crate::verbatim::{format_html_leading_comments, format_html_leading_comments
 use crate::{html::lists::element_list::FormatHtmlElementList, prelude::*};
 use biome_formatter::{CstFormatContext, FormatRefWithRule, FormatRuleWithOptions, write};
 use biome_html_syntax::{
-    HtmlElement, HtmlElementFields, HtmlElementList, HtmlRoot, HtmlSelfClosingElement,
-    HtmlSyntaxToken,
+    AnyHtmlTagName, HtmlElement, HtmlElementFields, HtmlElementList, HtmlRoot,
+    HtmlSelfClosingElement, HtmlSyntaxToken,
 };
+use biome_rowan::TokenText;
 use biome_string_case::StrLikeExtension;
 
 use super::{
@@ -19,6 +20,15 @@ use super::{
 ///
 const HTML_VERBATIM_TAGS: &[&str] = &["script", "style", "pre"];
 
+/// Helper to get token text from any tag name variant
+fn get_tag_name_text(name: &AnyHtmlTagName) -> Option<TokenText> {
+    match name {
+        AnyHtmlTagName::HtmlTagName(tag) => tag.value_token().ok().map(|t| t.token_text_trimmed()),
+        AnyHtmlTagName::HtmlComponentName(_) => None,
+        AnyHtmlTagName::HtmlMemberName(_) => None,
+    }
+}
+
 #[derive(Debug, Clone, Default)]
 pub(crate) struct FormatHtmlElement {
     /// Whether the closing `>` should be borrowed by an adjacent sibling element.
@@ -129,20 +139,17 @@ impl FormatHtmlElement {
             .nth(2)
             .is_some_and(|ancestor| HtmlRoot::can_cast(ancestor.kind()));
         // If `<template>` is at the root level, force multiline formatting of its children.
-        let is_template_element = tag_name
-            .token_text_trimmed()
+        let is_template_element = get_tag_name_text(&tag_name)
             .is_some_and(|tt| tt.to_ascii_lowercase_cow() == "template");
 
-        let tag_name = tag_name
-            .trim_trivia()
-            .map(|t| t.value_token())
-            .transpose()?;
-
-        let should_be_verbatim = HTML_VERBATIM_TAGS.iter().any(|tag| {
-            tag_name
-                .as_ref()
-                .is_some_and(|tag_name| tag_name.text().eq_ignore_ascii_case(tag))
-        });
+        let should_be_verbatim = match tag_name {
+            AnyHtmlTagName::HtmlComponentName(_) | AnyHtmlTagName::HtmlMemberName(_) => false,
+            AnyHtmlTagName::HtmlTagName(tag_name) => HTML_VERBATIM_TAGS.iter().any(|tag| {
+                tag_name.value_token().as_ref().is_ok_and(|tag_name_token| {
+                    tag_name_token.text_trimmed().eq_ignore_ascii_case(tag)
+                })
+            }),
+        };
 
         let should_format_embedded_nodes = if f.context().should_delegate_fmt_embedded_nodes() {
             // Only delegate for supported <script> or <style> content
diff --git a/crates/biome_html_formatter/src/html/auxiliary/member_name.rs b/crates/biome_html_formatter/src/html/auxiliary/member_name.rs
new file mode 100644
index 000000000000..4392052851c3
--- /dev/null
+++ b/crates/biome_html_formatter/src/html/auxiliary/member_name.rs
@@ -0,0 +1,16 @@
+use crate::prelude::*;
+use biome_formatter::write;
+use biome_html_syntax::{HtmlMemberName, HtmlMemberNameFields};
+#[derive(Debug, Clone, Default)]
+pub(crate) struct FormatHtmlMemberName;
+impl FormatNodeRule<HtmlMemberName> for FormatHtmlMemberName {
+    fn fmt_fields(&self, node: &HtmlMemberName, f: &mut HtmlFormatter) -> FormatResult<()> {
+        let HtmlMemberNameFields {
+            object,
+            member,
+            dot_token,
+        } = node.as_fields();
+
+        write!(f, [object.format(), dot_token.format(), member.format()])
+    }
+}
diff --git a/crates/biome_html_formatter/src/html/auxiliary/mod.rs b/crates/biome_html_formatter/src/html/auxiliary/mod.rs
index 260ed313e467..efa516139811 100644
--- a/crates/biome_html_formatter/src/html/auxiliary/mod.rs
+++ b/crates/biome_html_formatter/src/html/auxiliary/mod.rs
@@ -5,11 +5,13 @@ pub(crate) mod attribute_initializer_clause;
 pub(crate) mod attribute_name;
 pub(crate) mod cdata_section;
 pub(crate) mod closing_element;
+pub(crate) mod component_name;
 pub(crate) mod content;
 pub(crate) mod directive;
 pub(crate) mod double_text_expression;
 pub(crate) mod element;
 pub(crate) mod embedded_content;
+pub(crate) mod member_name;
 pub(crate) mod opening_element;
 pub(crate) mod root;
 pub(crate) mod self_closing_element;
diff --git a/crates/biome_html_formatter/src/html/auxiliary/opening_element.rs b/crates/biome_html_formatter/src/html/auxiliary/opening_element.rs
index 2312d7132e6b..32cef90f2047 100644
--- a/crates/biome_html_formatter/src/html/auxiliary/opening_element.rs
+++ b/crates/biome_html_formatter/src/html/auxiliary/opening_element.rs
@@ -59,7 +59,10 @@ impl FormatNodeRule<HtmlOpeningElement> for FormatHtmlOpeningElement {
         let name = name?;
         let css_display = get_css_display_from_tag(&name);
         let is_whitespace_sensitive = css_display.is_internally_whitespace_sensitive(f);
-        let is_canonical_html_element = should_lowercase_html_tag(f, &name);
+        let is_canonical_html_element = name
+            .as_html_tag_name()
+            .map(|name| should_lowercase_html_tag(f, &name))
+            .unwrap_or_default();
 
         let bracket_same_line = f.options().bracket_same_line().value();
 
diff --git a/crates/biome_html_formatter/src/html/auxiliary/self_closing_element.rs b/crates/biome_html_formatter/src/html/auxiliary/self_closing_element.rs
index d250ffe28b80..ea4a13163801 100644
--- a/crates/biome_html_formatter/src/html/auxiliary/self_closing_element.rs
+++ b/crates/biome_html_formatter/src/html/auxiliary/self_closing_element.rs
@@ -18,7 +18,10 @@ impl FormatNodeRule<HtmlSelfClosingElement> for FormatHtmlSelfClosingElement {
         let bracket_same_line = f.options().bracket_same_line().value();
         let self_close_void_elements = f.options().self_close_void_elements();
         let name = name?;
-        let is_canonical_html_element = should_lowercase_html_tag(f, &name);
+        let is_canonical_html_element = name
+            .as_html_tag_name()
+            .map(|name| should_lowercase_html_tag(f, &name))
+            .unwrap_or_default();
 
         write!(f, [l_angle_token.format(), name.format()])?;
 
diff --git a/crates/biome_html_formatter/src/html/lists/attribute_list.rs b/crates/biome_html_formatter/src/html/lists/attribute_list.rs
index cb7994bc8086..0507e9f3888d 100644
--- a/crates/biome_html_formatter/src/html/lists/attribute_list.rs
+++ b/crates/biome_html_formatter/src/html/lists/attribute_list.rs
@@ -1,6 +1,6 @@
 use crate::{html::auxiliary::attribute::FormatHtmlAttributeOptions, prelude::*};
 use biome_formatter::{AttributePosition, FormatRuleWithOptions, write};
-use biome_html_syntax::{AnyHtmlAttribute, HtmlAttributeList, HtmlTagName};
+use biome_html_syntax::{AnyHtmlAttribute, AnyHtmlTagName, HtmlAttributeList};
 
 #[derive(Debug, Clone, Default)]
 pub(crate) struct FormatHtmlAttributeList {
@@ -8,7 +8,7 @@ pub(crate) struct FormatHtmlAttributeList {
     pub is_canonical_html_element: bool,
 
     /// The name of the tag this attribute list belongs to.
-    pub tag_name: Option<HtmlTagName>,
+    pub tag_name: Option<AnyHtmlTagName>,
 }
 
 pub(crate) struct FormatHtmlAttributeListOptions {
@@ -16,7 +16,7 @@ pub(crate) struct FormatHtmlAttributeListOptions {
     pub is_canonical_html_element: bool,
 
     /// The name of the tag this attribute list belongs to.
-    pub tag_name: Option<HtmlTagName>,
+    pub tag_name: Option<AnyHtmlTagName>,
 }
 
 impl FormatRuleWithOptions<HtmlAttributeList> for FormatHtmlAttributeList {
diff --git a/crates/biome_html_formatter/src/utils/css_display.rs b/crates/biome_html_formatter/src/utils/css_display.rs
index 325a5ce6c594..f1704bcb8363 100644
--- a/crates/biome_html_formatter/src/utils/css_display.rs
+++ b/crates/biome_html_formatter/src/utils/css_display.rs
@@ -10,7 +10,7 @@
 
 use crate::HtmlFormatter;
 use crate::utils::metadata::{MATHML_ALL_TAGS, SVG_ALL_TAGS};
-use biome_html_syntax::HtmlTagName;
+use biome_html_syntax::AnyHtmlTagName;
 use biome_string_case::StrLikeExtension;
 
 /// CSS display values that are relevant for HTML formatting decisions.
@@ -243,12 +243,18 @@ pub fn get_css_display(tag_name: &str) -> CssDisplay {
     }
 }
 
-/// Gets the CSS display value from an HtmlTagName syntax node.
-pub fn get_css_display_from_tag(tag_name: &HtmlTagName) -> CssDisplay {
-    let Ok(token) = tag_name.value_token() else {
-        return CssDisplay::Inline;
-    };
-    get_css_display(token.text_trimmed())
+/// Gets the CSS display value from an [AnyHtmlTagName] syntax node.
+pub fn get_css_display_from_tag(tag_name: &AnyHtmlTagName) -> CssDisplay {
+    match tag_name {
+        AnyHtmlTagName::HtmlComponentName(_) => CssDisplay::Inline,
+        AnyHtmlTagName::HtmlMemberName(_) => CssDisplay::Inline,
+        AnyHtmlTagName::HtmlTagName(tag_name) => {
+            let Ok(token) = tag_name.value_token() else {
+                return CssDisplay::Inline;
+            };
+            get_css_display(token.text_trimmed())
+        }
+    }
 }
 
 #[cfg(test)]
diff --git a/crates/biome_html_formatter/src/utils/metadata.rs b/crates/biome_html_formatter/src/utils/metadata.rs
index 9914ea258892..b0f58f8e08f4 100644
--- a/crates/biome_html_formatter/src/utils/metadata.rs
+++ b/crates/biome_html_formatter/src/utils/metadata.rs
@@ -1,6 +1,6 @@
 use std::{borrow::Cow, collections::HashMap, sync::LazyLock};
 
-use biome_html_syntax::{AnyHtmlElement, HtmlAttributeName, HtmlTagName};
+use biome_html_syntax::{AnyHtmlElement, AnyHtmlTagName, HtmlAttributeName, HtmlTagName};
 use biome_string_case::{StrLikeExtension, StrOnlyExtension};
 
 use crate::{
@@ -847,16 +847,27 @@ pub(crate) fn is_canonical_html_attribute_name(tag_name: &str, attribute_name: &
 ///
 /// See [`HTML_ATTRIBUTES_BY_TAG`], [`HTML_GLOBAL_ATTRIBUTES`].
 pub(crate) fn is_canonical_html_attribute(
-    tag_name: &HtmlTagName,
+    tag_name: &AnyHtmlTagName,
     attribute_name: &HtmlAttributeName,
 ) -> bool {
-    let Ok(tag_name) = tag_name.value_token() else {
-        return false;
-    };
-    let Ok(attribute_name) = attribute_name.value_token() else {
-        return false;
-    };
-    is_canonical_html_attribute_name(tag_name.text_trimmed(), attribute_name.text_trimmed())
+    // Only check for canonical attributes on regular HTML tags, not components
+    match tag_name {
+        AnyHtmlTagName::HtmlTagName(tag) => {
+            let Ok(tag_token) = tag.value_token() else {
+                return false;
+            };
+            let tag_name_text = tag_token.text_trimmed();
+
+            let Ok(attribute_token) = attribute_name.value_token() else {
+                return false;
+            };
+            let attribute_name_text = attribute_token.text_trimmed();
+
+            is_canonical_html_attribute_name(tag_name_text, attribute_name_text)
+        }
+        // Component names and member names are not canonical HTML
+        AnyHtmlTagName::HtmlComponentName(_) | AnyHtmlTagName::HtmlMemberName(_) => false,
+    }
 }
 
 /// Gets the CSS display value for an HTML element.
diff --git a/crates/biome_html_formatter/tests/quick_test.rs b/crates/biome_html_formatter/tests/quick_test.rs
index 26a73cc0cc49..4de06eddb359 100644
--- a/crates/biome_html_formatter/tests/quick_test.rs
+++ b/crates/biome_html_formatter/tests/quick_test.rs
@@ -20,16 +20,26 @@ fn quick_test() {
     // quick brown fox
     // "#;
     let src = r#"
-{#snippet ff.call()}
-    {page.value}
-    {second.value}
-    <div>
-        <span></span>
-    </div>
-{/snippet}
+<script type="text/x-template" id="header-view-template">
+      <div class="draggable-header-view"
+        @mousedown="startDrag" @touchstart="startDrag"
+        @mousemove="onDrag" @touchmove="onDrag"
+        @mouseup="stopDrag" @touchend="stopDrag" @mouseleave="stopDrag">
+        <svg class="bg" width="320" height="560">
+          <path :d="headerPath" fill="3F51B5"></path>
+        </svg>
+        <div class="header">
+          <slot name="header"></slot>
+        </div>
+        <div class="content" :style="contentPosition">
+          <slot name="content"></slot>
+        </div>
+      </div>
+    </script>
 "#;
-    let source_type = HtmlFileSource::astro();
+    let source_type = HtmlFileSource::html();
     let tree = parse_html(src, HtmlParseOptions::from(&source_type));
+    dbg!(&tree);
     let options = HtmlFormatOptions::new(source_type)
         .with_indent_style(IndentStyle::Space)
         .with_line_width(LineWidth::try_from(80).unwrap())
diff --git a/crates/biome_html_formatter/tests/specs/html/astro/component.astro.snap b/crates/biome_html_formatter/tests/specs/html/astro/component.astro.snap
index 8dd686c96550..e65084dcdbc1 100644
--- a/crates/biome_html_formatter/tests/specs/html/astro/component.astro.snap
+++ b/crates/biome_html_formatter/tests/specs/html/astro/component.astro.snap
@@ -39,7 +39,7 @@ Trailing newline: true
 import Base from "$layouts/Base.astro";
 ---
 
-<Base title="500"></Base>
+<Base title="500"> </Base>
 
 ```
 
diff --git a/crates/biome_html_formatter/tests/specs/html/svelte/component.svelte.snap b/crates/biome_html_formatter/tests/specs/html/svelte/component.svelte.snap
index bafcd48787ed..0a72adf541a1 100644
--- a/crates/biome_html_formatter/tests/specs/html/svelte/component.svelte.snap
+++ b/crates/biome_html_formatter/tests/specs/html/svelte/component.svelte.snap
@@ -31,6 +31,6 @@ Trailing newline: true
 -----
 
 ```svelte
-<Base title="500"></Base>
+<Base title="500"> </Base>
 
 ```
diff --git a/crates/biome_html_formatter/tests/specs/html/vue/component.vue.snap b/crates/biome_html_formatter/tests/specs/html/vue/component.vue.snap
index e482d2d31665..f034ea2467f5 100644
--- a/crates/biome_html_formatter/tests/specs/html/vue/component.vue.snap
+++ b/crates/biome_html_formatter/tests/specs/html/vue/component.vue.snap
@@ -31,6 +31,6 @@ Trailing newline: true
 -----
 
 ```vue
-<Base title="500"></Base>
+<Base title="500"> </Base>
 
 ```
diff --git a/crates/biome_html_parser/src/lexer/mod.rs b/crates/biome_html_parser/src/lexer/mod.rs
index 14a8401f9dd8..baa1657f9acb 100644
--- a/crates/biome_html_parser/src/lexer/mod.rs
+++ b/crates/biome_html_parser/src/lexer/mod.rs
@@ -110,6 +110,7 @@ impl<'src> HtmlLexer<'src> {
     }
 
     /// Consume a token in the [HtmlLexContext::InsideTagVue] context.
+    /// This context is used for Vue files with Vue-specific directives.
     fn consume_token_inside_tag_vue(&mut self, current: u8) -> HtmlSyntaxKind {
         let dispatched = lookup_byte(current);
 
@@ -676,6 +677,9 @@ impl<'src> HtmlLexer<'src> {
 
     /// Consumes an HTML tag name token starting with the given byte.
     /// Tag names can contain alphanumeric characters, hyphens, colons and dots.
+    /// Consumes an HTML tag name token starting with the given byte.
+    /// Tag names can contain alphanumeric characters, hyphens, and colons.
+    /// In component contexts (Vue/Svelte/Astro), dots are excluded and lexed separately.
     fn consume_tag_name(&mut self, first: u8) -> HtmlSyntaxKind {
         self.assert_current_char_boundary();
 
@@ -1258,10 +1262,10 @@ fn is_tag_name_byte(byte: u8) -> bool {
     // However, custom tag names must start with a lowercase letter, but they can be followed by pretty much anything else.
     // https://html.spec.whatwg.org/#valid-custom-element-name
 
-    // The extra characters allowed here `-`, `:`, and `.` are not usually allowed in the HTML tag name.
+    // The extra characters allowed here `-` and `:` are not usually allowed in the HTML tag name.
     // However, Prettier considers them to be valid characters in tag names, so we allow them to remain compatible.
 
-    byte.is_ascii_alphanumeric() || byte == b'-' || byte == b':' || byte == b'.'
+    byte.is_ascii_alphanumeric() || byte == b'-' || byte == b':'
 }
 
 fn is_attribute_name_byte(byte: u8) -> bool {
diff --git a/crates/biome_html_parser/src/syntax/mod.rs b/crates/biome_html_parser/src/syntax/mod.rs
index 72fdd80fbe2f..ee2b701cfb9c 100644
--- a/crates/biome_html_parser/src/syntax/mod.rs
+++ b/crates/biome_html_parser/src/syntax/mod.rs
@@ -132,6 +132,8 @@ fn parse_doc_type(p: &mut HtmlParser) -> ParsedSyntax {
 /// will emit diagnostics. We want to allow them if they have no special meaning.
 #[inline(always)]
 fn inside_tag_context(p: &HtmlParser) -> HtmlLexContext {
+    // Only Vue files use InsideTagVue context, which has Vue-specific directive parsing (v-bind, :, @, etc.)
+    // Svelte and Astro use regular InsideTag context as they have different directive syntax
     if HtmlSyntaxFeatures::Vue.is_supported(p) {
         HtmlLexContext::InsideTagVue
     } else {
@@ -147,6 +149,68 @@ fn is_possible_component(p: &HtmlParser, tag_name: &str) -> bool {
         && !p.options().is_html()
 }
 
+/// Returns true if the current file supports component syntax (Vue/Svelte/Astro)
+fn supports_components(p: &HtmlParser) -> bool {
+    !p.options().is_html()
+}
+
+/// Returns the lexer context to use when parsing component names and member expressions.
+/// This allows `.` to be lexed as a token for member expressions like Component.Member
+/// We reuse InsideTagVue context because it supports `.` lexing, but this is ONLY used
+/// for parsing component names, not for parsing attributes.
+#[inline(always)]
+fn component_name_context(p: &HtmlParser) -> HtmlLexContext {
+    if supports_components(p) {
+        // Use InsideTagVue for all component-supporting files when parsing component names
+        // This allows `.` to be lexed properly for member expressions
+        // Note: This is safe because we only use this context for tag names, not attributes
+        HtmlLexContext::InsideTagVue
+    } else {
+        HtmlLexContext::InsideTag
+    }
+}
+
+/// Parse a tag name, which returns AnyHtmlTagName (one of: HtmlTagName, HtmlComponentName, or HtmlMemberName)
+/// This follows the JSX parser pattern for handling member expressions like Component.Member
+fn parse_any_tag_name(p: &mut HtmlParser) -> ParsedSyntax {
+    if !is_at_start_literal(p) {
+        return Absent;
+    }
+
+    let tag_text = p.cur_text();
+
+    // Step 1: Parse base name (either component or regular tag)
+    let name = if is_possible_component(p, tag_text) {
+        // Parse as component name - use component_name_context to allow `.` for member expressions
+        let m = p.start();
+        p.bump_with_context(HTML_LITERAL, component_name_context(p));
+        Present(m.complete(p, HTML_COMPONENT_NAME))
+    } else {
+        // Parse as regular HTML tag
+        parse_literal(p, HTML_TAG_NAME)
+    };
+
+    // Step 2: Extend with member access if present (using .map() pattern from JSX parser)
+    name.map(|mut name| {
+        while p.at(T![.]) {
+            let m = name.precede(p); // Create marker BEFORE already-parsed name
+            p.bump_with_context(T![.], component_name_context(p)); // Use component context for `.`
+
+            // Parse member name - must use component_name_context to maintain `.` lexing
+            if is_at_start_literal(p) {
+                let member_m = p.start();
+                p.bump_with_context(HTML_LITERAL, component_name_context(p));
+                member_m.complete(p, HTML_TAG_NAME);
+            } else {
+                p.error(expected_element_name(p, p.cur_range()));
+            }
+
+            name = m.complete(p, HTML_MEMBER_NAME); // Wrap previous name
+        }
+        name
+    })
+}
+
 fn parse_element(p: &mut HtmlParser) -> ParsedSyntax {
     if !p.at(T![<]) {
         return Absent;
@@ -162,7 +226,8 @@ fn parse_element(p: &mut HtmlParser) -> ParsedSyntax {
     let is_embedded_language_tag = EMBEDDED_LANGUAGE_ELEMENTS
         .iter()
         .any(|tag| tag.eq_ignore_ascii_case(opening_tag_name.as_str()));
-    parse_literal(p, HTML_TAG_NAME).or_add_diagnostic(p, expected_element_name);
+
+    parse_any_tag_name(p).or_add_diagnostic(p, expected_element_name);
 
     AttributeList.parse_list(p);
 
@@ -244,7 +309,7 @@ fn parse_closing_tag(p: &mut HtmlParser) -> ParsedSyntax {
     if should_be_self_closing {
         p.error(void_element_should_not_have_closing_tag(p, p.cur_range()).into_diagnostic(p));
     }
-    let _name = parse_literal(p, HTML_TAG_NAME);
+    let _name = parse_any_tag_name(p);
 
     // There shouldn't be any attributes in a closing tag.
     while p.at(HTML_LITERAL) || p.at(T!["{{"]) || p.at(T!["}}"]) {
@@ -458,7 +523,8 @@ fn parse_literal(p: &mut HtmlParser, kind: HtmlSyntaxKind) -> ParsedSyntax {
             p.bump_remap_with_context(
                 HTML_LITERAL,
                 match kind {
-                    HTML_TAG_NAME | HTML_ATTRIBUTE_NAME => inside_tag_context(p),
+                    HTML_TAG_NAME | HTML_ATTRIBUTE_NAME | HTML_COMPONENT_NAME
+                    | HTML_MEMBER_NAME => inside_tag_context(p),
                     _ => HtmlLexContext::Regular,
                 },
             )
@@ -467,7 +533,9 @@ fn parse_literal(p: &mut HtmlParser, kind: HtmlSyntaxKind) -> ParsedSyntax {
         p.bump_remap_with_context(
             HTML_LITERAL,
             match kind {
-                HTML_TAG_NAME | HTML_ATTRIBUTE_NAME => inside_tag_context(p),
+                HTML_TAG_NAME | HTML_ATTRIBUTE_NAME | HTML_COMPONENT_NAME | HTML_MEMBER_NAME => {
+                    inside_tag_context(p)
+                }
                 _ => HtmlLexContext::Regular,
             },
         );
@@ -475,7 +543,9 @@ fn parse_literal(p: &mut HtmlParser, kind: HtmlSyntaxKind) -> ParsedSyntax {
         p.bump_with_context(
             HTML_LITERAL,
             match kind {
-                HTML_TAG_NAME | HTML_ATTRIBUTE_NAME => inside_tag_context(p),
+                HTML_TAG_NAME | HTML_ATTRIBUTE_NAME | HTML_COMPONENT_NAME | HTML_MEMBER_NAME => {
+                    inside_tag_context(p)
+                }
                 _ => HtmlLexContext::Regular,
             },
         );
diff --git a/crates/biome_html_parser/src/token_source.rs b/crates/biome_html_parser/src/token_source.rs
index 0ba9d639298a..fb00eb8a2c0e 100644
--- a/crates/biome_html_parser/src/token_source.rs
+++ b/crates/biome_html_parser/src/token_source.rs
@@ -28,6 +28,7 @@ pub(crate) enum HtmlLexContext {
     /// When the lexer is inside a tag, special characters are lexed as tag tokens.
     InsideTag,
     /// Like [InsideTag], but with Vue-specific tokens enabled.
+    /// This enables parsing of Vue directives (v-bind, :, @, #, etc.)
     InsideTagVue,
     /// When the parser encounters a `=` token (the beginning of the attribute initializer clause), it switches to this context.
     ///
diff --git a/crates/biome_html_parser/tests/html_specs/error/vue/invalid-v-bind-shorthand.vue.snap b/crates/biome_html_parser/tests/html_specs/error/vue/invalid-v-bind-shorthand.vue.snap
index 9a621d385dc5..19ab02aace6f 100644
--- a/crates/biome_html_parser/tests/html_specs/error/vue/invalid-v-bind-shorthand.vue.snap
+++ b/crates/biome_html_parser/tests/html_specs/error/vue/invalid-v-bind-shorthand.vue.snap
@@ -20,7 +20,7 @@ HtmlRoot {
     html: HtmlElementList [
         HtmlSelfClosingElement {
             l_angle_token: L_ANGLE@0..1 "<" [] [],
-            name: HtmlTagName {
+            name: HtmlComponentName {
                 value_token: HTML_LITERAL@1..5 "Foo" [] [Whitespace(" ")],
             },
             attributes: HtmlAttributeList [
@@ -64,7 +64,7 @@ HtmlRoot {
   3: HTML_ELEMENT_LIST@0..17
     0: HTML_SELF_CLOSING_ELEMENT@0..17
       0: L_ANGLE@0..1 "<" [] []
-      1: HTML_TAG_NAME@1..5
+      1: HTML_COMPONENT_NAME@1..5
         0: HTML_LITERAL@1..5 "Foo" [] [Whitespace(" ")]
       2: HTML_ATTRIBUTE_LIST@5..15
         0: HTML_BOGUS_ATTRIBUTE@5..7
diff --git a/crates/biome_html_parser/tests/html_specs/error/vue/invalid-v-on-shorthand.vue.snap b/crates/biome_html_parser/tests/html_specs/error/vue/invalid-v-on-shorthand.vue.snap
index 27a366b672e8..23ae97f2faa7 100644
--- a/crates/biome_html_parser/tests/html_specs/error/vue/invalid-v-on-shorthand.vue.snap
+++ b/crates/biome_html_parser/tests/html_specs/error/vue/invalid-v-on-shorthand.vue.snap
@@ -20,7 +20,7 @@ HtmlRoot {
     html: HtmlElementList [
         HtmlSelfClosingElement {
             l_angle_token: L_ANGLE@0..1 "<" [] [],
-            name: HtmlTagName {
+            name: HtmlComponentName {
                 value_token: HTML_LITERAL@1..5 "Foo" [] [Whitespace(" ")],
             },
             attributes: HtmlAttributeList [
@@ -59,7 +59,7 @@ HtmlRoot {
   3: HTML_ELEMENT_LIST@0..29
     0: HTML_SELF_CLOSING_ELEMENT@0..29
       0: L_ANGLE@0..1 "<" [] []
-      1: HTML_TAG_NAME@1..5
+      1: HTML_COMPONENT_NAME@1..5
         0: HTML_LITERAL@1..5 "Foo" [] [Whitespace(" ")]
       2: HTML_ATTRIBUTE_LIST@5..27
         0: VUE_BOGUS_DIRECTIVE@5..7
diff --git a/crates/biome_html_parser/tests/html_specs/ok/astro/component.astro.snap b/crates/biome_html_parser/tests/html_specs/ok/astro/component.astro.snap
index bbe4c4600e1b..6af16818ab31 100644
--- a/crates/biome_html_parser/tests/html_specs/ok/astro/component.astro.snap
+++ b/crates/biome_html_parser/tests/html_specs/ok/astro/component.astro.snap
@@ -32,7 +32,7 @@ HtmlRoot {
         HtmlElement {
             opening_element: HtmlOpeningElement {
                 l_angle_token: L_ANGLE@47..50 "<" [Newline("\n"), Newline("\n")] [],
-                name: HtmlTagName {
+                name: HtmlComponentName {
                     value_token: HTML_LITERAL@50..55 "Base" [] [Whitespace(" ")],
                 },
                 attributes: HtmlAttributeList [
@@ -54,7 +54,7 @@ HtmlRoot {
             closing_element: HtmlClosingElement {
                 l_angle_token: L_ANGLE@67..69 "<" [Newline("\n")] [],
                 slash_token: SLASH@69..70 "/" [] [],
-                name: HtmlTagName {
+                name: HtmlComponentName {
                     value_token: HTML_LITERAL@70..74 "Base" [] [],
                 },
                 r_angle_token: R_ANGLE@74..75 ">" [] [],
@@ -80,7 +80,7 @@ HtmlRoot {
     0: HTML_ELEMENT@47..75
       0: HTML_OPENING_ELEMENT@47..67
         0: L_ANGLE@47..50 "<" [Newline("\n"), Newline("\n")] []
-        1: HTML_TAG_NAME@50..55
+        1: HTML_COMPONENT_NAME@50..55
           0: HTML_LITERAL@50..55 "Base" [] [Whitespace(" ")]
         2: HTML_ATTRIBUTE_LIST@55..66
           0: HTML_ATTRIBUTE@55..66
@@ -95,7 +95,7 @@ HtmlRoot {
       2: HTML_CLOSING_ELEMENT@67..75
         0: L_ANGLE@67..69 "<" [Newline("\n")] []
         1: SLASH@69..70 "/" [] []
-        2: HTML_TAG_NAME@70..74
+        2: HTML_COMPONENT_NAME@70..74
           0: HTML_LITERAL@70..74 "Base" [] []
         3: R_ANGLE@74..75 ">" [] []
   4: EOF@75..76 "" [Newline("\n")] []
diff --git a/crates/biome_html_parser/tests/html_specs/ok/astro/component_member.astro b/crates/biome_html_parser/tests/html_specs/ok/astro/component_member.astro
new file mode 100644
index 000000000000..d765683d06b5
--- /dev/null
+++ b/crates/biome_html_parser/tests/html_specs/ok/astro/component_member.astro
@@ -0,0 +1 @@
+<AvatarPrimitive.Fallback />
diff --git a/crates/biome_html_parser/tests/html_specs/ok/astro/component_member.astro.snap b/crates/biome_html_parser/tests/html_specs/ok/astro/component_member.astro.snap
new file mode 100644
index 000000000000..1555cb0c858b
--- /dev/null
+++ b/crates/biome_html_parser/tests/html_specs/ok/astro/component_member.astro.snap
@@ -0,0 +1,62 @@
+---
+source: crates/biome_html_parser/tests/spec_test.rs
+expression: snapshot
+---
+## Input
+
+```astro
+<AvatarPrimitive.Fallback />
+
+```
+
+
+## AST
+
+```
+HtmlRoot {
+    bom_token: missing (optional),
+    frontmatter: missing (optional),
+    directive: missing (optional),
+    html: HtmlElementList [
+        HtmlSelfClosingElement {
+            l_angle_token: L_ANGLE@0..1 "<" [] [],
+            name: HtmlMemberName {
+                object: HtmlComponentName {
+                    value_token: HTML_LITERAL@1..16 "AvatarPrimitive" [] [],
+                },
+                dot_token: DOT@16..17 "." [] [],
+                member: HtmlTagName {
+                    value_token: HTML_LITERAL@17..26 "Fallback" [] [Whitespace(" ")],
+                },
+            },
+            attributes: HtmlAttributeList [],
+            slash_token: SLASH@26..27 "/" [] [],
+            r_angle_token: R_ANGLE@27..28 ">" [] [],
+        },
+    ],
+    eof_token: EOF@28..29 "" [Newline("\n")] [],
+}
+```
+
+## CST
+
+```
+0: HTML_ROOT@0..29
+  0: (empty)
+  1: (empty)
+  2: (empty)
+  3: HTML_ELEMENT_LIST@0..28
+    0: HTML_SELF_CLOSING_ELEMENT@0..28
+      0: L_ANGLE@0..1 "<" [] []
+      1: HTML_MEMBER_NAME@1..26
+        0: HTML_COMPONENT_NAME@1..16
+          0: HTML_LITERAL@1..16 "AvatarPrimitive" [] []
+        1: DOT@16..17 "." [] []
+        2: HTML_TAG_NAME@17..26
+          0: HTML_LITERAL@17..26 "Fallback" [] [Whitespace(" ")]
+      2: HTML_ATTRIBUTE_LIST@26..26
+      3: SLASH@26..27 "/" [] []
+      4: R_ANGLE@27..28 ">" [] []
+  4: EOF@28..29 "" [Newline("\n")] []
+
+```
diff --git a/crates/biome_html_parser/tests/html_specs/ok/astro/component_member_nested.astro b/crates/biome_html_parser/tests/html_specs/ok/astro/component_member_nested.astro
new file mode 100644
index 000000000000..a8e87c8a973f
--- /dev/null
+++ b/crates/biome_html_parser/tests/html_specs/ok/astro/component_member_nested.astro
@@ -0,0 +1 @@
+<Component.A.B.C />
diff --git a/crates/biome_html_parser/tests/html_specs/ok/astro/component_member_nested.astro.snap b/crates/biome_html_parser/tests/html_specs/ok/astro/component_member_nested.astro.snap
new file mode 100644
index 000000000000..06cf40aba49c
--- /dev/null
+++ b/crates/biome_html_parser/tests/html_specs/ok/astro/component_member_nested.astro.snap
@@ -0,0 +1,82 @@
+---
+source: crates/biome_html_parser/tests/spec_test.rs
+expression: snapshot
+---
+## Input
+
+```astro
+<Component.A.B.C />
+
+```
+
+
+## AST
+
+```
+HtmlRoot {
+    bom_token: missing (optional),
+    frontmatter: missing (optional),
+    directive: missing (optional),
+    html: HtmlElementList [
+        HtmlSelfClosingElement {
+            l_angle_token: L_ANGLE@0..1 "<" [] [],
+            name: HtmlMemberName {
+                object: HtmlMemberName {
+                    object: HtmlMemberName {
+                        object: HtmlComponentName {
+                            value_token: HTML_LITERAL@1..10 "Component" [] [],
+                        },
+                        dot_token: DOT@10..11 "." [] [],
+                        member: HtmlTagName {
+                            value_token: HTML_LITERAL@11..12 "A" [] [],
+                        },
+                    },
+                    dot_token: DOT@12..13 "." [] [],
+                    member: HtmlTagName {
+                        value_token: HTML_LITERAL@13..14 "B" [] [],
+                    },
+                },
+                dot_token: DOT@14..15 "." [] [],
+                member: HtmlTagName {
+                    value_token: HTML_LITERAL@15..17 "C" [] [Whitespace(" ")],
+                },
+            },
+            attributes: HtmlAttributeList [],
+            slash_token: SLASH@17..18 "/" [] [],
+            r_angle_token: R_ANGLE@18..19 ">" [] [],
+        },
+    ],
+    eof_token: EOF@19..20 "" [Newline("\n")] [],
+}
+```
+
+## CST
+
+```
+0: HTML_ROOT@0..20
+  0: (empty)
+  1: (empty)
+  2: (empty)
+  3: HTML_ELEMENT_LIST@0..19
+    0: HTML_SELF_CLOSING_ELEMENT@0..19
+      0: L_ANGLE@0..1 "<" [] []
+      1: HTML_MEMBER_NAME@1..17
+        0: HTML_MEMBER_NAME@1..14
+          0: HTML_MEMBER_NAME@1..12
+            0: HTML_COMPONENT_NAME@1..10
+              0: HTML_LITERAL@1..10 "Component" [] []
+            1: DOT@10..11 "." [] []
+            2: HTML_TAG_NAME@11..12
+              0: HTML_LITERAL@11..12 "A" [] []
+          1: DOT@12..13 "." [] []
+          2: HTML_TAG_NAME@13..14
+            0: HTML_LITERAL@13..14 "B" [] []
+        1: DOT@14..15 "." [] []
+        2: HTML_TAG_NAME@15..17
+          0: HTML_LITERAL@15..17 "C" [] [Whitespace(" ")]
+      2: HTML_ATTRIBUTE_LIST@17..17
+      3: SLASH@17..18 "/" [] []
+      4: R_ANGLE@18..19 ">" [] []
+  4: EOF@19..20 "" [Newline("\n")] []
+
+```
diff --git a/crates/biome_html_parser/tests/html_specs/ok/astro/component_with_attributes.astro b/crates/biome_html_parser/tests/html_specs/ok/astro/component_with_attributes.astro
new file mode 100644
index 000000000000..aa354c4894ae
--- /dev/null
+++ b/crates/biome_html_parser/tests/html_specs/ok/astro/component_with_attributes.astro
@@ -0,0 +1,4 @@
+<AvatarPrimitive.Fallback
+  class="something nice"
+  data-test="value"
+/>
diff --git a/crates/biome_html_parser/tests/html_specs/ok/astro/component_with_attributes.astro.snap b/crates/biome_html_parser/tests/html_specs/ok/astro/component_with_attributes.astro.snap
new file mode 100644
index 000000000000..5dd9fb78ba11
--- /dev/null
+++ b/crates/biome_html_parser/tests/html_specs/ok/astro/component_with_attributes.astro.snap
@@ -0,0 +1,102 @@
+---
+source: crates/biome_html_parser/tests/spec_test.rs
+expression: snapshot
+---
+## Input
+
+```astro
+<AvatarPrimitive.Fallback
+  class="something nice"
+  data-test="value"
+/>
+
+```
+
+
+## AST
+
+```
+HtmlRoot {
+    bom_token: missing (optional),
+    frontmatter: missing (optional),
+    directive: missing (optional),
+    html: HtmlElementList [
+        HtmlSelfClosingElement {
+            l_angle_token: L_ANGLE@0..1 "<" [] [],
+            name: HtmlMemberName {
+                object: HtmlComponentName {
+                    value_token: HTML_LITERAL@1..16 "AvatarPrimitive" [] [],
+                },
+                dot_token: DOT@16..17 "." [] [],
+                member: HtmlTagName {
+                    value_token: HTML_LITERAL@17..25 "Fallback" [] [],
+                },
+            },
+            attributes: HtmlAttributeList [
+                HtmlAttribute {
+                    name: HtmlAttributeName {
+                        value_token: HTML_LITERAL@25..33 "class" [Newline("\n"), Whitespace("  ")] [],
+                    },
+                    initializer: HtmlAttributeInitializerClause {
+                        eq_token: EQ@33..34 "=" [] [],
+                        value: HtmlString {
+                            value_token: HTML_STRING_LITERAL@34..50 "\"something nice\"" [] [],
+                        },
+                    },
+                },
+                HtmlAttribute {
+                    name: HtmlAttributeName {
+                        value_token: HTML_LITERAL@50..62 "data-test" [Newline("\n"), Whitespace("  ")] [],
+                    },
+                    initializer: HtmlAttributeInitializerClause {
+                        eq_token: EQ@62..63 "=" [] [],
+                        value: HtmlString {
+                            value_token: HTML_STRING_LITERAL@63..70 "\"value\"" [] [],
+                        },
+                    },
+                },
+            ],
+            slash_token: SLASH@70..72 "/" [Newline("\n")] [],
+            r_angle_token: R_ANGLE@72..73 ">" [] [],
+        },
+    ],
+    eof_token: EOF@73..74 "" [Newline("\n")] [],
+}
+```
+
+## CST
+
+```
+0: HTML_ROOT@0..74
+  0: (empty)
+  1: (empty)
+  2: (empty)
+  3: HTML_ELEMENT_LIST@0..73
+    0: HTML_SELF_CLOSING_ELEMENT@0..73
+      0: L_ANGLE@0..1 "<" [] []
+      1: HTML_MEMBER_NAME@1..25
+        0: HTML_COMPONENT_NAME@1..16
+          0: HTML_LITERAL@1..16 "AvatarPrimitive" [] []
+        1: DOT@16..17 "." [] []
+        2: HTML_TAG_NAME@17..25
+          0: HTML_LITERAL@17..25 "Fallback" [] []
+      2: HTML_ATTRIBUTE_LIST@25..70
+        0: HTML_ATTRIBUTE@25..50
+          0: HTML_ATTRIBUTE_NAME@25..33
+            0: HTML_LITERAL@25..33 "class" [Newline("\n"), Whitespace("  ")] []
+          1: HTML_ATTRIBUTE_INITIALIZER_CLAUSE@33..50
+            0: EQ@33..34 "=" [] []
+            1: HTML_STRING@34..50
+              0: HTML_STRING_LITERAL@34..50 "\"something nice\"" [] []
+        1: HTML_ATTRIBUTE@50..70
+          0: HTML_ATTRIBUTE_NAME@50..62
+            0: HTML_LITERAL@50..62 "data-test" [Newline("\n"), Whitespace("  ")] []
+          1: HTML_ATTRIBUTE_INITIALIZER_CLAUSE@62..70
+            0: EQ@62..63 "=" [] []
+            1: HTML_STRING@63..70
+              0: HTML_STRING_LITERAL@63..70 "\"value\"" [] []
+      3: SLASH@70..72 "/" [Newline("\n")] []
+      4: R_ANGLE@72..73 ">" [] []
+  4: EOF@73..74 "" [Newline("\n")] []
+
+```
diff --git a/crates/biome_html_parser/tests/html_specs/ok/astro/issue_7837.astro.snap b/crates/biome_html_parser/tests/html_specs/ok/astro/issue_7837.astro.snap
index 74aed48e77e0..6e69b3c1a450 100644
--- a/crates/biome_html_parser/tests/html_specs/ok/astro/issue_7837.astro.snap
+++ b/crates/biome_html_parser/tests/html_specs/ok/astro/issue_7837.astro.snap
@@ -42,7 +42,7 @@ HtmlRoot {
         HtmlElement {
             opening_element: HtmlOpeningElement {
                 l_angle_token: L_ANGLE@359..361 "<" [Newline("\n")] [],
-                name: HtmlTagName {
+                name: HtmlComponentName {
                     value_token: HTML_LITERAL@361..371 "PageLayout" [] [],
                 },
                 attributes: HtmlAttributeList [],
@@ -74,13 +74,19 @@ HtmlRoot {
                         HtmlElement {
                             opening_element: HtmlOpeningElement {
                                 l_angle_token: L_ANGLE@448..452 "<" [Newline("\n"), Whitespace("\t\t")] [],
-                                name: HtmlTagName {
+                                name: HtmlComponentName {
                                     value_token: HTML_LITERAL@452..460 "Counter" [] [Whitespace(" ")],
                                 },
                                 attributes: HtmlAttributeList [
                                     HtmlAttribute {
                                         name: HtmlAttributeName {
-                                            value_token: HTML_LITERAL@460..471 "client:load" [] [],
+                                            value_token: HTML_LITERAL@460..466 "client" [] [],
+                                        },
+                                        initializer: missing (optional),
+                                    },
+                                    HtmlAttribute {
+                                        name: HtmlAttributeName {
+                                            value_token: HTML_LITERAL@466..471 ":load" [] [],
                                         },
                                         initializer: missing (optional),
                                     },
@@ -115,7 +121,7 @@ HtmlRoot {
                             closing_element: HtmlClosingElement {
                                 l_angle_token: L_ANGLE@493..497 "<" [Newline("\n"), Whitespace("\t\t")] [],
                                 slash_token: SLASH@497..498 "/" [] [],
-                                name: HtmlTagName {
+                                name: HtmlComponentName {
                                     value_token: HTML_LITERAL@498..505 "Counter" [] [],
                                 },
                                 r_angle_token: R_ANGLE@505..506 ">" [] [],
@@ -135,7 +141,7 @@ HtmlRoot {
             closing_element: HtmlClosingElement {
                 l_angle_token: L_ANGLE@515..517 "<" [Newline("\n")] [],
                 slash_token: SLASH@517..518 "/" [] [],
-                name: HtmlTagName {
+                name: HtmlComponentName {
                     value_token: HTML_LITERAL@518..528 "PageLayout" [] [],
                 },
                 r_angle_token: R_ANGLE@528..529 ">" [] [],
@@ -161,7 +167,7 @@ HtmlRoot {
     0: HTML_ELEMENT@359..529
       0: HTML_OPENING_ELEMENT@359..372
         0: L_ANGLE@359..361 "<" [Newline("\n")] []
-        1: HTML_TAG_NAME@361..371
+        1: HTML_COMPONENT_NAME@361..371
           0: HTML_LITERAL@361..371 "PageLayout" [] []
         2: HTML_ATTRIBUTE_LIST@371..371
         3: R_ANGLE@371..372 ">" [] []
@@ -184,12 +190,16 @@ HtmlRoot {
             0: HTML_ELEMENT@448..506
               0: HTML_OPENING_ELEMENT@448..472
                 0: L_ANGLE@448..452 "<" [Newline("\n"), Whitespace("\t\t")] []
-                1: HTML_TAG_NAME@452..460
+                1: HTML_COMPONENT_NAME@452..460
                   0: HTML_LITERAL@452..460 "Counter" [] [Whitespace(" ")]
                 2: HTML_ATTRIBUTE_LIST@460..471
-                  0: HTML_ATTRIBUTE@460..471
-                    0: HTML_ATTRIBUTE_NAME@460..471
-                      0: HTML_LITERAL@460..471 "client:load" [] []
+                  0: HTML_ATTRIBUTE@460..466
+                    0: HTML_ATTRIBUTE_NAME@460..466
+                      0: HTML_LITERAL@460..466 "client" [] []
+                    1: (empty)
+                  1: HTML_ATTRIBUTE@466..471
+                    0: HTML_ATTRIBUTE_NAME@466..471
+                      0: HTML_LITERAL@466..471 ":load" [] []
                     1: (empty)
                 3: R_ANGLE@471..472 ">" [] []
               1: HTML_ELEMENT_LIST@472..493
@@ -212,7 +222,7 @@ HtmlRoot {
               2: HTML_CLOSING_ELEMENT@493..506
                 0: L_ANGLE@493..497 "<" [Newline("\n"), Whitespace("\t\t")] []
                 1: SLASH@497..498 "/" [] []
-                2: HTML_TAG_NAME@498..505
+                2: HTML_COMPONENT_NAME@498..505
                   0: HTML_LITERAL@498..505 "Counter" [] []
                 3: R_ANGLE@505..506 ">" [] []
           2: HTML_CLOSING_ELEMENT@506..515
@@ -224,7 +234,7 @@ HtmlRoot {
       2: HTML_CLOSING_ELEMENT@515..529
         0: L_ANGLE@515..517 "<" [Newline("\n")] []
         1: SLASH@517..518 "/" [] []
-        2: HTML_TAG_NAME@518..528
+        2: HTML_COMPONENT_NAME@518..528
           0: HTML_LITERAL@518..528 "PageLayout" [] []
         3: R_ANGLE@528..529 ">" [] []
   4: EOF@529..530 "" [Newline("\n")] []
diff --git a/crates/biome_html_parser/tests/html_specs/ok/astro/multiple_nested_expression.astro.snap b/crates/biome_html_parser/tests/html_specs/ok/astro/multiple_nested_expression.astro.snap
index ec16733e7ec2..e39e1abd36d6 100644
--- a/crates/biome_html_parser/tests/html_specs/ok/astro/multiple_nested_expression.astro.snap
+++ b/crates/biome_html_parser/tests/html_specs/ok/astro/multiple_nested_expression.astro.snap
@@ -61,7 +61,7 @@ HtmlRoot {
                 },
                 HtmlSelfClosingElement {
                     l_angle_token: L_ANGLE@107..110 "<" [Newline("\n"), Whitespace("\t")] [],
-                    name: HtmlTagName {
+                    name: HtmlComponentName {
                         value_token: HTML_LITERAL@110..118 "Counter" [] [Whitespace(" ")],
                     },
                     attributes: HtmlAttributeList [],
@@ -126,7 +126,7 @@ HtmlRoot {
           4: R_ANGLE@106..107 ">" [] []
         1: HTML_SELF_CLOSING_ELEMENT@107..120
           0: L_ANGLE@107..110 "<" [Newline("\n"), Whitespace("\t")] []
-          1: HTML_TAG_NAME@110..118
+          1: HTML_COMPONENT_NAME@110..118
             0: HTML_LITERAL@110..118 "Counter" [] [Whitespace(" ")]
           2: HTML_ATTRIBUTE_LIST@118..118
           3: SLASH@118..119 "/" [] []
diff --git a/crates/biome_html_parser/tests/html_specs/ok/compat/non-spec-compliant-tag-name.html.snap b/crates/biome_html_parser/tests/html_specs/ok/compat/non-spec-compliant-tag-name.html.snap
index 17df6116608f..0ee15ff5ab6a 100644
--- a/crates/biome_html_parser/tests/html_specs/ok/compat/non-spec-compliant-tag-name.html.snap
+++ b/crates/biome_html_parser/tests/html_specs/ok/compat/non-spec-compliant-tag-name.html.snap
@@ -21,9 +21,15 @@ HtmlRoot {
             opening_element: HtmlOpeningElement {
                 l_angle_token: L_ANGLE@0..1 "<" [] [],
                 name: HtmlTagName {
-                    value_token: HTML_LITERAL@1..17 "f:link.external" [] [Whitespace(" ")],
+                    value_token: HTML_LITERAL@1..7 "f:link" [] [],
                 },
                 attributes: HtmlAttributeList [
+                    HtmlAttribute {
+                        name: HtmlAttributeName {
+                            value_token: HTML_LITERAL@7..17 ".external" [] [Whitespace(" ")],
+                        },
+                        initializer: missing (optional),
+                    },
                     HtmlAttribute {
                         name: HtmlAttributeName {
                             value_token: HTML_LITERAL@17..20 "uri" [] [],
@@ -79,17 +85,21 @@ HtmlRoot {
     0: HTML_ELEMENT@0..106
       0: HTML_OPENING_ELEMENT@0..84
         0: L_ANGLE@0..1 "<" [] []
-        1: HTML_TAG_NAME@1..17
-          0: HTML_LITERAL@1..17 "f:link.external" [] [Whitespace(" ")]
-        2: HTML_ATTRIBUTE_LIST@17..83
-          0: HTML_ATTRIBUTE@17..42
+        1: HTML_TAG_NAME@1..7
+          0: HTML_LITERAL@1..7 "f:link" [] []
+        2: HTML_ATTRIBUTE_LIST@7..83
+          0: HTML_ATTRIBUTE@7..17
+            0: HTML_ATTRIBUTE_NAME@7..17
+              0: HTML_LITERAL@7..17 ".external" [] [Whitespace(" ")]
+            1: (empty)
+          1: HTML_ATTRIBUTE@17..42
             0: HTML_ATTRIBUTE_NAME@17..20
               0: HTML_LITERAL@17..20 "uri" [] []
             1: HTML_ATTRIBUTE_INITIALIZER_CLAUSE@20..42
               0: EQ@20..21 "=" [] []
               1: HTML_STRING@21..42
                 0: HTML_STRING_LITERAL@21..42 "\"https://domain.de/\"" [] [Whitespace(" ")]
-          1: HTML_ATTRIBUTE@42..83
+          2: HTML_ATTRIBUTE@42..83
             0: HTML_ATTRIBUTE_NAME@42..47
               0: HTML_LITERAL@42..47 "class" [] []
             1: HTML_ATTRIBUTE_INITIALIZER_CLAUSE@47..83
diff --git a/crates/biome_html_parser/tests/html_specs/ok/svelte/await_catch_no_then.svelte.snap b/crates/biome_html_parser/tests/html_specs/ok/svelte/await_catch_no_then.svelte.snap
index 5824fce35346..09f0c5e2ad5b 100644
--- a/crates/biome_html_parser/tests/html_specs/ok/svelte/await_catch_no_then.svelte.snap
+++ b/crates/biome_html_parser/tests/html_specs/ok/svelte/await_catch_no_then.svelte.snap
@@ -35,8 +35,14 @@ HtmlRoot {
                 children: HtmlElementList [
                     HtmlSelfClosingElement {
                         l_angle_token: L_ANGLE@18..21 "<" [Newline("\n"), Whitespace("\t")] [],
-                        name: HtmlTagName {
-                            value_token: HTML_LITERAL@21..38 "Icons.DotsBounce" [] [Whitespace(" ")],
+                        name: HtmlMemberName {
+                            object: HtmlComponentName {
+                                value_token: HTML_LITERAL@21..26 "Icons" [] [],
+                            },
+                            dot_token: DOT@26..27 "." [] [],
+                            member: HtmlTagName {
+                                value_token: HTML_LITERAL@27..38 "DotsBounce" [] [Whitespace(" ")],
+                            },
                         },
                         attributes: HtmlAttributeList [],
                         slash_token: SLASH@38..39 "/" [] [],
@@ -117,8 +123,12 @@ HtmlRoot {
         6: HTML_ELEMENT_LIST@18..40
           0: HTML_SELF_CLOSING_ELEMENT@18..40
             0: L_ANGLE@18..21 "<" [Newline("\n"), Whitespace("\t")] []
-            1: HTML_TAG_NAME@21..38
-              0: HTML_LITERAL@21..38 "Icons.DotsBounce" [] [Whitespace(" ")]
+            1: HTML_MEMBER_NAME@21..38
+              0: HTML_COMPONENT_NAME@21..26
+                0: HTML_LITERAL@21..26 "Icons" [] []
+              1: DOT@26..27 "." [] []
+              2: HTML_TAG_NAME@27..38
+                0: HTML_LITERAL@27..38 "DotsBounce" [] [Whitespace(" ")]
             2: HTML_ATTRIBUTE_LIST@38..38
             3: SLASH@38..39 "/" [] []
             4: R_ANGLE@39..40 ">" [] []
diff --git a/crates/biome_html_parser/tests/html_specs/ok/svelte/await_dynamic_import.svelte.snap b/crates/biome_html_parser/tests/html_specs/ok/svelte/await_dynamic_import.svelte.snap
index 8345f2076904..7d35af60e60d 100644
--- a/crates/biome_html_parser/tests/html_specs/ok/svelte/await_dynamic_import.svelte.snap
+++ b/crates/biome_html_parser/tests/html_specs/ok/svelte/await_dynamic_import.svelte.snap
@@ -38,7 +38,7 @@ HtmlRoot {
                 children: HtmlElementList [
                     HtmlSelfClosingElement {
                         l_angle_token: L_ANGLE@65..69 "<" [Newline("\n"), Whitespace("  ")] [],
-                        name: HtmlTagName {
+                        name: HtmlComponentName {
                             value_token: HTML_LITERAL@69..79 "Component" [] [Whitespace(" ")],
                         },
                         attributes: HtmlAttributeList [],
@@ -82,7 +82,7 @@ HtmlRoot {
         6: HTML_ELEMENT_LIST@65..81
           0: HTML_SELF_CLOSING_ELEMENT@65..81
             0: L_ANGLE@65..69 "<" [Newline("\n"), Whitespace("  ")] []
-            1: HTML_TAG_NAME@69..79
+            1: HTML_COMPONENT_NAME@69..79
               0: HTML_LITERAL@69..79 "Component" [] [Whitespace(" ")]
             2: HTML_ATTRIBUTE_LIST@79..79
             3: SLASH@79..80 "/" [] []
diff --git a/crates/biome_html_parser/tests/html_specs/ok/svelte/complex_expressions.svelte.snap b/crates/biome_html_parser/tests/html_specs/ok/svelte/complex_expressions.svelte.snap
index 4a041f41a8e7..0c0f3b1850e9 100644
--- a/crates/biome_html_parser/tests/html_specs/ok/svelte/complex_expressions.svelte.snap
+++ b/crates/biome_html_parser/tests/html_specs/ok/svelte/complex_expressions.svelte.snap
@@ -44,8 +44,14 @@ HtmlRoot {
             children: HtmlElementList [
                 HtmlSelfClosingElement {
                     l_angle_token: L_ANGLE@50..53 "<" [Newline("\n"), Whitespace("\t")] [],
-                    name: HtmlTagName {
-                        value_token: HTML_LITERAL@53..67 "InputOTP.Slot" [] [Whitespace(" ")],
+                    name: HtmlMemberName {
+                        object: HtmlComponentName {
+                            value_token: HTML_LITERAL@53..61 "InputOTP" [] [],
+                        },
+                        dot_token: DOT@61..62 "." [] [],
+                        member: HtmlTagName {
+                            value_token: HTML_LITERAL@62..67 "Slot" [] [Whitespace(" ")],
+                        },
                     },
                     attributes: HtmlAttributeList [
                         HtmlSingleTextExpression {
@@ -98,8 +104,14 @@ HtmlRoot {
             children: HtmlElementList [
                 HtmlSelfClosingElement {
                     l_angle_token: L_ANGLE@126..129 "<" [Newline("\n"), Whitespace("\t")] [],
-                    name: HtmlTagName {
-                        value_token: HTML_LITERAL@129..143 "InputOTP.Slot" [] [Whitespace(" ")],
+                    name: HtmlMemberName {
+                        object: HtmlComponentName {
+                            value_token: HTML_LITERAL@129..137 "InputOTP" [] [],
+                        },
+                        dot_token: DOT@137..138 "." [] [],
+                        member: HtmlTagName {
+                            value_token: HTML_LITERAL@138..143 "Slot" [] [Whitespace(" ")],
+                        },
                     },
                     attributes: HtmlAttributeList [
                         HtmlSingleTextExpression {
@@ -149,8 +161,12 @@ HtmlRoot {
       1: HTML_ELEMENT_LIST@50..76
         0: HTML_SELF_CLOSING_ELEMENT@50..76
           0: L_ANGLE@50..53 "<" [Newline("\n"), Whitespace("\t")] []
-          1: HTML_TAG_NAME@53..67
-            0: HTML_LITERAL@53..67 "InputOTP.Slot" [] [Whitespace(" ")]
+          1: HTML_MEMBER_NAME@53..67
+            0: HTML_COMPONENT_NAME@53..61
+              0: HTML_LITERAL@53..61 "InputOTP" [] []
+            1: DOT@61..62 "." [] []
+            2: HTML_TAG_NAME@62..67
+              0: HTML_LITERAL@62..67 "Slot" [] [Whitespace(" ")]
           2: HTML_ATTRIBUTE_LIST@67..74
             0: HTML_SINGLE_TEXT_EXPRESSION@67..74
               0: L_CURLY@67..68 "{" [] []
@@ -187,8 +203,12 @@ HtmlRoot {
       1: HTML_ELEMENT_LIST@126..152
         0: HTML_SELF_CLOSING_ELEMENT@126..152
           0: L_ANGLE@126..129 "<" [Newline("\n"), Whitespace("\t")] []
-          1: HTML_TAG_NAME@129..143
-            0: HTML_LITERAL@129..143 "InputOTP.Slot" [] [Whitespace(" ")]
+          1: HTML_MEMBER_NAME@129..143
+            0: HTML_COMPONENT_NAME@129..137
+              0: HTML_LITERAL@129..137 "InputOTP" [] []
+            1: DOT@137..138 "." [] []
+            2: HTML_TAG_NAME@138..143
+              0: HTML_LITERAL@138..143 "Slot" [] [Whitespace(" ")]
           2: HTML_ATTRIBUTE_LIST@143..150
             0: HTML_SINGLE_TEXT_EXPRESSION@143..150
               0: L_CURLY@143..144 "{" [] []
diff --git a/crates/biome_html_parser/tests/html_specs/ok/svelte/component.svelte.snap b/crates/biome_html_parser/tests/html_specs/ok/svelte/component.svelte.snap
index 0af397594572..3130023d1232 100644
--- a/crates/biome_html_parser/tests/html_specs/ok/svelte/component.svelte.snap
+++ b/crates/biome_html_parser/tests/html_specs/ok/svelte/component.svelte.snap
@@ -22,7 +22,7 @@ HtmlRoot {
         HtmlElement {
             opening_element: HtmlOpeningElement {
                 l_angle_token: L_ANGLE@0..1 "<" [] [],
-                name: HtmlTagName {
+                name: HtmlComponentName {
                     value_token: HTML_LITERAL@1..6 "Base" [] [Whitespace(" ")],
                 },
                 attributes: HtmlAttributeList [
@@ -44,7 +44,7 @@ HtmlRoot {
             closing_element: HtmlClosingElement {
                 l_angle_token: L_ANGLE@18..20 "<" [Newline("\n")] [],
                 slash_token: SLASH@20..21 "/" [] [],
-                name: HtmlTagName {
+                name: HtmlComponentName {
                     value_token: HTML_LITERAL@21..25 "Base" [] [],
                 },
                 r_angle_token: R_ANGLE@25..26 ">" [] [],
@@ -66,7 +66,7 @@ HtmlRoot {
     0: HTML_ELEMENT@0..26
       0: HTML_OPENING_ELEMENT@0..18
         0: L_ANGLE@0..1 "<" [] []
-        1: HTML_TAG_NAME@1..6
+        1: HTML_COMPONENT_NAME@1..6
           0: HTML_LITERAL@1..6 "Base" [] [Whitespace(" ")]
         2: HTML_ATTRIBUTE_LIST@6..17
           0: HTML_ATTRIBUTE@6..17
@@ -81,7 +81,7 @@ HtmlRoot {
       2: HTML_CLOSING_ELEMENT@18..26
         0: L_ANGLE@18..20 "<" [Newline("\n")] []
         1: SLASH@20..21 "/" [] []
-        2: HTML_TAG_NAME@21..25
+        2: HTML_COMPONENT_NAME@21..25
           0: HTML_LITERAL@21..25 "Base" [] []
         3: R_ANGLE@25..26 ">" [] []
   4: EOF@26..27 "" [Newline("\n")] []
diff --git a/crates/biome_html_parser/tests/html_specs/ok/svelte/component_member.svelte b/crates/biome_html_parser/tests/html_specs/ok/svelte/component_member.svelte
new file mode 100644
index 000000000000..d765683d06b5
--- /dev/null
+++ b/crates/biome_html_parser/tests/html_specs/ok/svelte/component_member.svelte
@@ -0,0 +1 @@
+<AvatarPrimitive.Fallback />
diff --git a/crates/biome_html_parser/tests/html_specs/ok/svelte/component_member.svelte.snap b/crates/biome_html_parser/tests/html_specs/ok/svelte/component_member.svelte.snap
new file mode 100644
index 000000000000..2c3d545a5e9a
--- /dev/null
+++ b/crates/biome_html_parser/tests/html_specs/ok/svelte/component_member.svelte.snap
@@ -0,0 +1,62 @@
+---
+source: crates/biome_html_parser/tests/spec_test.rs
+expression: snapshot
+---
+## Input
+
+```svelte
+<AvatarPrimitive.Fallback />
+
+```
+
+
+## AST
+
+```
+HtmlRoot {
+    bom_token: missing (optional),
+    frontmatter: missing (optional),
+    directive: missing (optional),
+    html: HtmlElementList [
+        HtmlSelfClosingElement {
+            l_angle_token: L_ANGLE@0..1 "<" [] [],
+            name: HtmlMemberName {
+                object: HtmlComponentName {
+                    value_token: HTML_LITERAL@1..16 "AvatarPrimitive" [] [],
+                },
+                dot_token: DOT@16..17 "." [] [],
+                member: HtmlTagName {
+                    value_token: HTML_LITERAL@17..26 "Fallback" [] [Whitespace(" ")],
+                },
+            },
+            attributes: HtmlAttributeList [],
+            slash_token: SLASH@26..27 "/" [] [],
+            r_angle_token: R_ANGLE@27..28 ">" [] [],
+        },
+    ],
+    eof_token: EOF@28..29 "" [Newline("\n")] [],
+}
+```
+
+## CST
+
+```
+0: HTML_ROOT@0..29
+  0: (empty)
+  1: (empty)
+  2: (empty)
+  3: HTML_ELEMENT_LIST@0..28
+    0: HTML_SELF_CLOSING_ELEMENT@0..28
+      0: L_ANGLE@0..1 "<" [] []
+      1: HTML_MEMBER_NAME@1..26
+        0: HTML_COMPONENT_NAME@1..16
+          0: HTML_LITERAL@1..16 "AvatarPrimitive" [] []
+        1: DOT@16..17 "." [] []
+        2: HTML_TAG_NAME@17..26
+          0: HTML_LITERAL@17..26 "Fallback" [] [Whitespace(" ")]
+      2: HTML_ATTRIBUTE_LIST@26..26
+      3: SLASH@26..27 "/" [] []
+      4: R_ANGLE@27..28 ">" [] []
+  4: EOF@28..29 "" [Newline("\n")] []
+
+```
diff --git a/crates/biome_html_parser/tests/html_specs/ok/svelte/component_member_nested.svelte b/crates/biome_html_parser/tests/html_specs/ok/svelte/component_member_nested.svelte
new file mode 100644
index 000000000000..a8e87c8a973f
--- /dev/null
+++ b/crates/biome_html_parser/tests/html_specs/ok/svelte/component_member_nested.svelte
@@ -0,0 +1 @@
+<Component.A.B.C />
diff --git a/crates/biome_html_parser/tests/html_specs/ok/svelte/component_member_nested.svelte.snap b/crates/biome_html_parser/tests/html_specs/ok/svelte/component_member_nested.svelte.snap
new file mode 100644
index 000000000000..5e5322df1e55
--- /dev/null
+++ b/crates/biome_html_parser/tests/html_specs/ok/svelte/component_member_nested.svelte.snap
@@ -0,0 +1,82 @@
+---
+source: crates/biome_html_parser/tests/spec_test.rs
+expression: snapshot
+---
+## Input
+
+```svelte
+<Component.A.B.C />
+
+```
+
+
+## AST
+
+```
+HtmlRoot {
+    bom_token: missing (optional),
+    frontmatter: missing (optional),
+    directive: missing (optional),
+    html: HtmlElementList [
+        HtmlSelfClosingElement {
+            l_angle_token: L_ANGLE@0..1 "<" [] [],
+            name: HtmlMemberName {
+                object: HtmlMemberName {
+                    object: HtmlMemberName {
+                        object: HtmlComponentName {
+                            value_token: HTML_LITERAL@1..10 "Component" [] [],
+                        },
+                        dot_token: DOT@10..11 "." [] [],
+                        member: HtmlTagName {
+                            value_token: HTML_LITERAL@11..12 "A" [] [],
+                        },
+                    },
+                    dot_token: DOT@12..13 "." [] [],
+                    member: HtmlTagName {
+                        value_token: HTML_LITERAL@13..14 "B" [] [],
+                    },
+                },
+                dot_token: DOT@14..15 "." [] [],
+                member: HtmlTagName {
+                    value_token: HTML_LITERAL@15..17 "C" [] [Whitespace(" ")],
+                },
+            },
+            attributes: HtmlAttributeList [],
+            slash_token: SLASH@17..18 "/" [] [],
+            r_angle_token: R_ANGLE@18..19 ">" [] [],
+        },
+    ],
+    eof_token: EOF@19..20 "" [Newline("\n")] [],
+}
+```
+
+## CST
+
+```
+0: HTML_ROOT@0..20
+  0: (empty)
+  1: (empty)
+  2: (empty)
+  3: HTML_ELEMENT_LIST@0..19
+    0: HTML_SELF_CLOSING_ELEMENT@0..19
+      0: L_ANGLE@0..1 "<" [] []
+      1: HTML_MEMBER_NAME@1..17
+        0: HTML_MEMBER_NAME@1..14
+          0: HTML_MEMBER_NAME@1..12
+            0: HTML_COMPONENT_NAME@1..10
+              0: HTML_LITERAL@1..10 "Component" [] []
+            1: DOT@10..11 "." [] []
+            2: HTML_TAG_NAME@11..12
+              0: HTML_LITERAL@11..12 "A" [] []
+          1: DOT@12..13 "." [] []
+          2: HTML_TAG_NAME@13..14
+            0: HTML_LITERAL@13..14 "B" [] []
+        1: DOT@14..15 "." [] []
+        2: HTML_TAG_NAME@15..17
+          0: HTML_LITERAL@15..17 "C" [] [Whitespace(" ")]
+      2: HTML_ATTRIBUTE_LIST@17..17
+      3: SLASH@17..18 "/" [] []
+      4: R_ANGLE@18..19 ">" [] []
+  4: EOF@19..20 "" [Newline("\n")] []
+
+```
diff --git a/crates/biome_html_parser/tests/html_specs/ok/svelte/component_with_attributes.svelte b/crates/biome_html_parser/tests/html_specs/ok/svelte/component_with_attributes.svelte
new file mode 100644
index 000000000000..aa354c4894ae
--- /dev/null
+++ b/crates/biome_html_parser/tests/html_specs/ok/svelte/component_with_attributes.svelte
@@ -0,0 +1,4 @@
+<AvatarPrimitive.Fallback
+  class="something nice"
+  data-test="value"
+/>
diff --git a/crates/biome_html_parser/tests/html_specs/ok/svelte/component_with_attributes.svelte.snap b/crates/biome_html_parser/tests/html_specs/ok/svelte/component_with_attributes.svelte.snap
new file mode 100644
index 000000000000..339fb9879d7a
--- /dev/null
+++ b/crates/biome_html_parser/tests/html_specs/ok/svelte/component_with_attributes.svelte.snap
@@ -0,0 +1,102 @@
+---
+source: crates/biome_html_parser/tests/spec_test.rs
+expression: snapshot
+---
+## Input
+
+```svelte
+<AvatarPrimitive.Fallback
+  class="something nice"
+  data-test="value"
+/>
+
+```
+
+
+## AST
+
+```
+HtmlRoot {
+    bom_token: missing (optional),
+    frontmatter: missing (optional),
+    directive: missing (optional),
+    html: HtmlElementList [
+        HtmlSelfClosingElement {
+            l_angle_token: L_ANGLE@0..1 "<" [] [],
+            name: HtmlMemberName {
+                object: HtmlComponentName {
+                    value_token: HTML_LITERAL@1..16 "AvatarPrimitive" [] [],
+                },
+                dot_token: DOT@16..17 "." [] [],
+                member: HtmlTagName {
+                    value_token: HTML_LITERAL@17..25 "Fallback" [] [],
+                },
+            },
+            attributes: HtmlAttributeList [
+                HtmlAttribute {
+                    name: HtmlAttributeName {
+                        value_token: HTML_LITERAL@25..33 "class" [Newline("\n"), Whitespace("  ")] [],
+                    },
+                    initializer: HtmlAttributeInitializerClause {
+                        eq_token: EQ@33..34 "=" [] [],
+                        value: HtmlString {
+                            value_token: HTML_STRING_LITERAL@34..50 "\"something nice\"" [] [],
+                        },
+                    },
+                },
+                HtmlAttribute {
+                    name: HtmlAttributeName {
+                        value_token: HTML_LITERAL@50..62 "data-test" [Newline("\n"), Whitespace("  ")] [],
+                    },
+                    initializer: HtmlAttributeInitializerClause {
+                        eq_token: EQ@62..63 "=" [] [],
+                        value: HtmlString {
+                            value_token: HTML_STRING_LITERAL@63..70 "\"value\"" [] [],
+                        },
+                    },
+                },
+            ],
+            slash_token: SLASH@70..72 "/" [Newline("\n")] [],
+            r_angle_token: R_ANGLE@72..73 ">" [] [],
+        },
+    ],
+    eof_token: EOF@73..74 "" [Newline("\n")] [],
+}
+```
+
+## CST
+
+```
+0: HTML_ROOT@0..74
+  0: (empty)
+  1: (empty)
+  2: (empty)
+  3: HTML_ELEMENT_LIST@0..73
+    0: HTML_SELF_CLOSING_ELEMENT@0..73
+      0: L_ANGLE@0..1 "<" [] []
+      1: HTML_MEMBER_NAME@1..25
+        0: HTML_COMPONENT_NAME@1..16
+          0: HTML_LITERAL@1..16 "AvatarPrimitive" [] []
+        1: DOT@16..17 "." [] []
+        2: HTML_TAG_NAME@17..25
+          0: HTML_LITERAL@17..25 "Fallback" [] []
+      2: HTML_ATTRIBUTE_LIST@25..70
+        0: HTML_ATTRIBUTE@25..50
+          0: HTML_ATTRIBUTE_NAME@25..33
+            0: HTML_LITERAL@25..33 "class" [Newline("\n"), Whitespace("  ")] []
+          1: HTML_ATTRIBUTE_INITIALIZER_CLAUSE@33..50
+            0: EQ@33..34 "=" [] []
+            1: HTML_STRING@34..50
+              0: HTML_STRING_LITERAL@34..50 "\"something nice\"" [] []
+        1: HTML_ATTRIBUTE@50..70
+          0: HTML_ATTRIBUTE_NAME@50..62
+            0: HTML_LITERAL@50..62 "data-test" [Newline("\n"), Whitespace("  ")] []
+          1: HTML_ATTRIBUTE_INITIALIZER_CLAUSE@62..70
+            0: EQ@62..63 "=" [] []
+            1: HTML_STRING@63..70
+              0: HTML_STRING_LITERAL@63..70 "\"value\"" [] []
+      3: SLASH@70..72 "/" [Newline("\n")] []
+      4: R_ANGLE@72..73 ">" [] []
+  4: EOF@73..74 "" [Newline("\n")] []
+
+```
diff --git a/crates/biome_html_parser/tests/html_specs/ok/vue/component.vue.snap b/crates/biome_html_parser/tests/html_specs/ok/vue/component.vue.snap
index 48f7ab7b57b0..687f4fdf1f5d 100644
--- a/crates/biome_html_parser/tests/html_specs/ok/vue/component.vue.snap
+++ b/crates/biome_html_parser/tests/html_specs/ok/vue/component.vue.snap
@@ -22,7 +22,7 @@ HtmlRoot {
         HtmlElement {
             opening_element: HtmlOpeningElement {
                 l_angle_token: L_ANGLE@0..1 "<" [] [],
-                name: HtmlTagName {
+                name: HtmlComponentName {
                     value_token: HTML_LITERAL@1..6 "Base" [] [Whitespace(" ")],
                 },
                 attributes: HtmlAttributeList [
@@ -44,7 +44,7 @@ HtmlRoot {
             closing_element: HtmlClosingElement {
                 l_angle_token: L_ANGLE@18..20 "<" [Newline("\n")] [],
                 slash_token: SLASH@20..21 "/" [] [],
-                name: HtmlTagName {
+                name: HtmlComponentName {
                     value_token: HTML_LITERAL@21..25 "Base" [] [],
                 },
                 r_angle_token: R_ANGLE@25..26 ">" [] [],
@@ -66,7 +66,7 @@ HtmlRoot {
     0: HTML_ELEMENT@0..26
       0: HTML_OPENING_ELEMENT@0..18
         0: L_ANGLE@0..1 "<" [] []
-        1: HTML_TAG_NAME@1..6
+        1: HTML_COMPONENT_NAME@1..6
           0: HTML_LITERAL@1..6 "Base" [] [Whitespace(" ")]
         2: HTML_ATTRIBUTE_LIST@6..17
           0: HTML_ATTRIBUTE@6..17
@@ -81,7 +81,7 @@ HtmlRoot {
       2: HTML_CLOSING_ELEMENT@18..26
         0: L_ANGLE@18..20 "<" [Newline("\n")] []
         1: SLASH@20..21 "/" [] []
-        2: HTML_TAG_NAME@21..25
+        2: HTML_COMPONENT_NAME@21..25
           0: HTML_LITERAL@21..25 "Base" [] []
         3: R_ANGLE@25..26 ">" [] []
   4: EOF@26..27 "" [Newline("\n")] []
diff --git a/crates/biome_html_parser/tests/html_specs/ok/vue/component_member.vue b/crates/biome_html_parser/tests/html_specs/ok/vue/component_member.vue
new file mode 100644
index 000000000000..fca38671ce5e
--- /dev/null
+++ b/crates/biome_html_parser/tests/html_specs/ok/vue/component_member.vue
@@ -0,0 +1,3 @@
+<template>
+  <AvatarPrimitive.Fallback />
+</template>
diff --git a/crates/biome_html_parser/tests/html_specs/ok/vue/component_member.vue.snap b/crates/biome_html_parser/tests/html_specs/ok/vue/component_member.vue.snap
new file mode 100644
index 000000000000..93dfa4c6532e
--- /dev/null
+++ b/crates/biome_html_parser/tests/html_specs/ok/vue/component_member.vue.snap
@@ -0,0 +1,98 @@
+---
+source: crates/biome_html_parser/tests/spec_test.rs
+expression: snapshot
+---
+## Input
+
+```vue
+<template>
+  <AvatarPrimitive.Fallback />
+</template>
+
+```
+
+
+## AST
+
+```
+HtmlRoot {
+    bom_token: missing (optional),
+    frontmatter: missing (optional),
+    directive: missing (optional),
+    html: HtmlElementList [
+        HtmlElement {
+            opening_element: HtmlOpeningElement {
+                l_angle_token: L_ANGLE@0..1 "<" [] [],
+                name: HtmlTagName {
+                    value_token: HTML_LITERAL@1..9 "template" [] [],
+                },
+                attributes: HtmlAttributeList [],
+                r_angle_token: R_ANGLE@9..10 ">" [] [],
+            },
+            children: HtmlElementList [
+                HtmlSelfClosingElement {
+                    l_angle_token: L_ANGLE@10..14 "<" [Newline("\n"), Whitespace("  ")] [],
+                    name: HtmlMemberName {
+                        object: HtmlComponentName {
+                            value_token: HTML_LITERAL@14..29 "AvatarPrimitive" [] [],
+                        },
+                        dot_token: DOT@29..30 "." [] [],
+                        member: HtmlTagName {
+                            value_token: HTML_LITERAL@30..39 "Fallback" [] [Whitespace(" ")],
+                        },
+                    },
+                    attributes: HtmlAttributeList [],
+                    slash_token: SLASH@39..40 "/" [] [],
+                    r_angle_token: R_ANGLE@40..41 ">" [] [],
+                },
+            ],
+            closing_element: HtmlClosingElement {
+                l_angle_token: L_ANGLE@41..43 "<" [Newline("\n")] [],
+                slash_token: SLASH@43..44 "/" [] [],
+                name: HtmlTagName {
+                    value_token: HTML_LITERAL@44..52 "template" [] [],
+                },
+                r_angle_token: R_ANGLE@52..53 ">" [] [],
+            },
+        },
+    ],
+    eof_token: EOF@53..54 "" [Newline("\n")] [],
+}
+```
+
+## CST
+
+```
+0: HTML_ROOT@0..54
+  0: (empty)
+  1: (empty)
+  2: (empty)
+  3: HTML_ELEMENT_LIST@0..53
+    0: HTML_ELEMENT@0..53
+      0: HTML_OPENING_ELEMENT@0..10
+        0: L_ANGLE@0..1 "<" [] []
+        1: HTML_TAG_NAME@1..9
+          0: HTML_LITERAL@1..9 "template" [] []
+        2: HTML_ATTRIBUTE_LIST@9..9
+        3: R_ANGLE@9..10 ">" [] []
+      1: HTML_ELEMENT_LIST@10..41
+        0: HTML_SELF_CLOSING_ELEMENT@10..41
+          0: L_ANGLE@10..14 "<" [Newline("\n"), Whitespace("  ")] []
+          1: HTML_MEMBER_NAME@14..39
+            0: HTML_COMPONENT_NAME@14..29
+              0: HTML_LITERAL@14..29 "AvatarPrimitive" [] []
+            1: DOT@29..30 "." [] []
+            2: HTML_TAG_NAME@30..39
+              0: HTML_LITERAL@30..39 "Fallback" [] [Whitespace(" ")]
+          2: HTML_ATTRIBUTE_LIST@39..39
+          3: SLASH@39..40 "/" [] []
+          4: R_ANGLE@40..41 ">" [] []
+      2: HTML_CLOSING_ELEMENT@41..53
+        0: L_ANGLE@41..43 "<" [Newline("\n")] []
+        1: SLASH@43..44 "/" [] []
+        2: HTML_TAG_NAME@44..52
+          0: HTML_LITERAL@44..52 "template" [] []
+        3: R_ANGLE@52..53 ">" [] []
+  4: EOF@53..54 "" [Newline("\n")] []
+
+```
diff --git a/crates/biome_html_parser/tests/html_specs/ok/vue/component_member_nested.vue b/crates/biome_html_parser/tests/html_specs/ok/vue/component_member_nested.vue
new file mode 100644
index 000000000000..a4f6a8f79743
--- /dev/null
+++ b/crates/biome_html_parser/tests/html_specs/ok/vue/component_member_nested.vue
@@ -0,0 +1,3 @@
+<template>
+  <Component.A.B.C />
+</template>
diff --git a/crates/biome_html_parser/tests/html_specs/ok/vue/component_member_nested.vue.snap b/crates/biome_html_parser/tests/html_specs/ok/vue/component_member_nested.vue.snap
new file mode 100644
index 000000000000..e78f9c7ac8da
--- /dev/null
+++ b/crates/biome_html_parser/tests/html_specs/ok/vue/component_member_nested.vue.snap
@@ -0,0 +1,118 @@
+---
+source: crates/biome_html_parser/tests/spec_test.rs
+expression: snapshot
+---
+## Input
+
+```vue
+<template>
+  <Component.A.B.C />
+</template>
+
+```
+
+
+## AST
+
+```
+HtmlRoot {
+    bom_token: missing (optional),
+    frontmatter: missing (optional),
+    directive: missing (optional),
+    html: HtmlElementList [
+        HtmlElement {
+            opening_element: HtmlOpeningElement {
+                l_angle_token: L_ANGLE@0..1 "<" [] [],
+                name: HtmlTagName {
+                    value_token: HTML_LITERAL@1..9 "template" [] [],
+                },
+                attributes: HtmlAttributeList [],
+                r_angle_token: R_ANGLE@9..10 ">" [] [],
+            },
+            children: HtmlElementList [
+                HtmlSelfClosingElement {
+                    l_angle_token: L_ANGLE@10..14 "<" [Newline("\n"), Whitespace("  ")] [],
+                    name: HtmlMemberName {
+                        object: HtmlMemberName {
+                            object: HtmlMemberName {
+                                object: HtmlComponentName {
+                                    value_token: HTML_LITERAL@14..23 "Component" [] [],
+                                },
+                                dot_token: DOT@23..24 "." [] [],
+                                member: HtmlTagName {
+                                    value_token: HTML_LITERAL@24..25 "A" [] [],
+                                },
+                            },
+                            dot_token: DOT@25..26 "." [] [],
+                            member: HtmlTagName {
+                                value_token: HTML_LITERAL@26..27 "B" [] [],
+                            },
+                        },
+                        dot_token: DOT@27..28 "." [] [],
+                        member: HtmlTagName {
+                            value_token: HTML_LITERAL@28..30 "C" [] [Whitespace(" ")],
+                        },
+                    },
+                    attributes: HtmlAttributeList [],
+                    slash_token: SLASH@30..31 "/" [] [],
+                    r_angle_token: R_ANGLE@31..32 ">" [] [],
+                },
+            ],
+            closing_element: HtmlClosingElement {
+                l_angle_token: L_ANGLE@32..34 "<" [Newline("\n")] [],
+                slash_token: SLASH@34..35 "/" [] [],
+                name: HtmlTagName {
+                    value_token: HTML_LITERAL@35..43 "template" [] [],
+                },
+                r_angle_token: R_ANGLE@43..44 ">" [] [],
+            },
+        },
+    ],
+    eof_token: EOF@44..45 "" [Newline("\n")] [],
+}
+```
+
+## CST
+
+```
+0: HTML_ROOT@0..45
+  0: (empty)
+  1: (empty)
+  2: (empty)
+  3: HTML_ELEMENT_LIST@0..44
+    0: HTML_ELEMENT@0..44
+      0: HTML_OPENING_ELEMENT@0..10
+        0: L_ANGLE@0..1 "<" [] []
+        1: HTML_TAG_NAME@1..9
+          0: HTML_LITERAL@1..9 "template" [] []
+        2: HTML_ATTRIBUTE_LIST@9..9
+        3: R_ANGLE@9..10 ">" [] []
+      1: HTML_ELEMENT_LIST@10..32
+        0: HTML_SELF_CLOSING_ELEMENT@10..32
+          0: L_ANGLE@10..14 "<" [Newline("\n"), Whitespace("  ")] []
+          1: HTML_MEMBER_NAME@14..30
+            0: HTML_MEMBER_NAME@14..27
+              0: HTML_MEMBER_NAME@14..25
+                0: HTML_COMPONENT_NAME@14..23
+                  0: HTML_LITERAL@14..23 "Component" [] []
+                1: DOT@23..24 "." [] []
+                2: HTML_TAG_NAME@24..25
+                  0: HTML_LITERAL@24..25 "A" [] []
+              1: DOT@25..26 "." [] []
+              2: HTML_TAG_NAME@26..27
+                0: HTML_LITERAL@26..27 "B" [] []
+            1: DOT@27..28 "." [] []
+            2: HTML_TAG_NAME@28..30
+              0: HTML_LITERAL@28..30 "C" [] [Whitespace(" ")]
+          2: HTML_ATTRIBUTE_LIST@30..30
+          3: SLASH@30..31 "/" [] []
+          4: R_ANGLE@31..32 ">" [] []
+      2: HTML_CLOSING_ELEMENT@32..44
+        0: L_ANGLE@32..34 "<" [Newline("\n")] []
+        1: SLASH@34..35 "/" [] []
+        2: HTML_TAG_NAME@35..43
+          0: HTML_LITERAL@35..43 "template" [] []
+        3: R_ANGLE@43..44 ">" [] []
+  4: EOF@44..45 "" [Newline("\n")] []
+
+```
diff --git a/crates/biome_html_parser/tests/html_specs/ok/vue/component_member_simple.vue b/crates/biome_html_parser/tests/html_specs/ok/vue/component_member_simple.vue
new file mode 100644
index 000000000000..d765683d06b5
--- /dev/null
+++ b/crates/biome_html_parser/tests/html_specs/ok/vue/component_member_simple.vue
@@ -0,0 +1 @@
+<AvatarPrimitive.Fallback />
diff --git a/crates/biome_html_parser/tests/html_specs/ok/vue/component_member_simple.vue.snap b/crates/biome_html_parser/tests/html_specs/ok/vue/component_member_simple.vue.snap
new file mode 100644
index 000000000000..047712a41da2
--- /dev/null
+++ b/crates/biome_html_parser/tests/html_specs/ok/vue/component_member_simple.vue.snap
@@ -0,0 +1,62 @@
+---
+source: crates/biome_html_parser/tests/spec_test.rs
+expression: snapshot
+---
+## Input
+
+```vue
+<AvatarPrimitive.Fallback />
+
+```
+
+
+## AST
+
+```
+HtmlRoot {
+    bom_token: missing (optional),
+    frontmatter: missing (optional),
+    directive: missing (optional),
+    html: HtmlElementList [
+        HtmlSelfClosingElement {
+            l_angle_token: L_ANGLE@0..1 "<" [] [],
+            name: HtmlMemberName {
+                object: HtmlComponentName {
+                    value_token: HTML_LITERAL@1..16 "AvatarPrimitive" [] [],
+                },
+                dot_token: DOT@16..17 "." [] [],
+                member: HtmlTagName {
+                    value_token: HTML_LITERAL@17..26 "Fallback" [] [Whitespace(" ")],
+                },
+            },
+            attributes: HtmlAttributeList [],
+            slash_token: SLASH@26..27 "/" [] [],
+            r_angle_token: R_ANGLE@27..28 ">" [] [],
+        },
+    ],
+    eof_token: EOF@28..29 "" [Newline("\n")] [],
+}
+```
+
+## CST
+
+```
+0: HTML_ROOT@0..29
+  0: (empty)
+  1: (empty)
+  2: (empty)
+  3: HTML_ELEMENT_LIST@0..28
+    0: HTML_SELF_CLOSING_ELEMENT@0..28
+      0: L_ANGLE@0..1 "<" [] []
+      1: HTML_MEMBER_NAME@1..26
+        0: HTML_COMPONENT_NAME@1..16
+          0: HTML_LITERAL@1..16 "AvatarPrimitive" [] []
+        1: DOT@16..17 "." [] []
+        2: HTML_TAG_NAME@17..26
+          0: HTML_LITERAL@17..26 "Fallback" [] [Whitespace(" ")]
+      2: HTML_ATTRIBUTE_LIST@26..26
+      3: SLASH@26..27 "/" [] []
+      4: R_ANGLE@27..28 ">" [] []
+  4: EOF@28..29 "" [Newline("\n")] []
+
+```
diff --git a/crates/biome_html_parser/tests/html_specs/ok/vue/component_with_attributes.vue b/crates/biome_html_parser/tests/html_specs/ok/vue/component_with_attributes.vue
new file mode 100644
index 000000000000..468c6eb02a70
--- /dev/null
+++ b/crates/biome_html_parser/tests/html_specs/ok/vue/component_with_attributes.vue
@@ -0,0 +1,6 @@
+<template>
+  <AvatarPrimitive.Fallback
+    bind:ref
+    class="something nice"
+  />
+</template>
diff --git a/crates/biome_html_parser/tests/html_specs/ok/vue/component_with_attributes.vue.snap b/crates/biome_html_parser/tests/html_specs/ok/vue/component_with_attributes.vue.snap
new file mode 100644
index 000000000000..b5551c31bc1e
--- /dev/null
+++ b/crates/biome_html_parser/tests/html_specs/ok/vue/component_with_attributes.vue.snap
@@ -0,0 +1,147 @@
+---
+source: crates/biome_html_parser/tests/spec_test.rs
+expression: snapshot
+---
+## Input
+
+```vue
+<template>
+  <AvatarPrimitive.Fallback
+    bind:ref
+    class="something nice"
+  />
+</template>
+
+```
+
+
+## AST
+
+```
+HtmlRoot {
+    bom_token: missing (optional),
+    frontmatter: missing (optional),
+    directive: missing (optional),
+    html: HtmlElementList [
+        HtmlElement {
+            opening_element: HtmlOpeningElement {
+                l_angle_token: L_ANGLE@0..1 "<" [] [],
+                name: HtmlTagName {
+                    value_token: HTML_LITERAL@1..9 "template" [] [],
+                },
+                attributes: HtmlAttributeList [],
+                r_angle_token: R_ANGLE@9..10 ">" [] [],
+            },
+            children: HtmlElementList [
+                HtmlSelfClosingElement {
+                    l_angle_token: L_ANGLE@10..14 "<" [Newline("\n"), Whitespace("  ")] [],
+                    name: HtmlMemberName {
+                        object: HtmlComponentName {
+                            value_token: HTML_LITERAL@14..29 "AvatarPrimitive" [] [],
+                        },
+                        dot_token: DOT@29..30 "." [] [],
+                        member: HtmlTagName {
+                            value_token: HTML_LITERAL@30..38 "Fallback" [] [],
+                        },
+                    },
+                    attributes: HtmlAttributeList [
+                        HtmlAttribute {
+                            name: HtmlAttributeName {
+                                value_token: HTML_LITERAL@38..47 "bind" [Newline("\n"), Whitespace("    ")] [],
+                            },
+                            initializer: missing (optional),
+                        },
+                        VueVBindShorthandDirective {
+                            arg: VueDirectiveArgument {
+                                colon_token: COLON@47..48 ":" [] [],
+                                arg: VueStaticArgument {
+                                    name_token: HTML_LITERAL@48..51 "ref" [] [],
+                                },
+                            },
+                            modifiers: VueModifierList [],
+                            initializer: missing (optional),
+                        },
+                        HtmlAttribute {
+                            name: HtmlAttributeName {
+                                value_token: HTML_LITERAL@51..61 "class" [Newline("\n"), Whitespace("    ")] [],
+                            },
+                            initializer: HtmlAttributeInitializerClause {
+                                eq_token: EQ@61..62 "=" [] [],
+                                value: HtmlString {
+                                    value_token: HTML_STRING_LITERAL@62..78 "\"something nice\"" [] [],
+                                },
+                            },
+                        },
+                    ],
+                    slash_token: SLASH@78..82 "/" [Newline("\n"), Whitespace("  ")] [],
+                    r_angle_token: R_ANGLE@82..83 ">" [] [],
+                },
+            ],
+            closing_element: HtmlClosingElement {
+                l_angle_token: L_ANGLE@83..85 "<" [Newline("\n")] [],
+                slash_token: SLASH@85..86 "/" [] [],
+                name: HtmlTagName {
+                    value_token: HTML_LITERAL@86..94 "template" [] [],
+                },
+                r_angle_token: R_ANGLE@94..95 ">" [] [],
+            },
+        },
+    ],
+    eof_token: EOF@95..96 "" [Newline("\n")] [],
+}
+```
+
+## CST
+
+```
+0: HTML_ROOT@0..96
+  0: (empty)
+  1: (empty)
+  2: (empty)
+  3: HTML_ELEMENT_LIST@0..95
+    0: HTML_ELEMENT@0..95
+      0: HTML_OPENING_ELEMENT@0..10
+        0: L_ANGLE@0..1 "<" [] []
+        1: HTML_TAG_NAME@1..9
+          0: HTML_LITERAL@1..9 "template" [] []
+        2: HTML_ATTRIBUTE_LIST@9..9
+        3: R_ANGLE@9..10 ">" [] []
+      1: HTML_ELEMENT_LIST@10..83
+        0: HTML_SELF_CLOSING_ELEMENT@10..83
+          0: L_ANGLE@10..14 "<" [Newline("\n"), Whitespace("  ")] []
+          1: HTML_MEMBER_NAME@14..38
+            0: HTML_COMPONENT_NAME@14..29
+              0: HTML_LITERAL@14..29 "AvatarPrimitive" [] []
+            1: DOT@29..30 "." [] []
+            2: HTML_TAG_NAME@30..38
+              0: HTML_LITERAL@30..38 "Fallback" [] []
+          2: HTML_ATTRIBUTE_LIST@38..78
+            0: HTML_ATTRIBUTE@38..47
+              0: HTML_ATTRIBUTE_NAME@38..47
+                0: HTML_LITERAL@38..47 "bind" [Newline("\n"), Whitespace("    ")] []
+              1: (empty)
+            1: VUE_V_BIND_SHORTHAND_DIRECTIVE@47..51
+              0: VUE_DIRECTIVE_ARGUMENT@47..51
+                0: COLON@47..48 ":" [] []
+                1: VUE_STATIC_ARGUMENT@48..51
+                  0: HTML_LITERAL@48..51 "ref" [] []
+              1: VUE_MODIFIER_LIST@51..51
+              2: (empty)
+            2: HTML_ATTRIBUTE@51..78
+              0: HTML_ATTRIBUTE_NAME@51..61
+                0: HTML_LITERAL@51..61 "class" [Newline("\n"), Whitespace("    ")] []
+              1: HTML_ATTRIBUTE_INITIALIZER_CLAUSE@61..78
+                0: EQ@61..62 "=" [] []
+                1: HTML_STRING@62..78
+                  0: HTML_STRING_LITERAL@62..78 "\"something nice\"" [] []
+          3: SLASH@78..82 "/" [Newline("\n"), Whitespace("  ")] []
+          4: R_ANGLE@82..83 ">" [] []
+      2: HTML_CLOSING_ELEMENT@83..95
+        0: L_ANGLE@83..85 "<" [Newline("\n")] []
+        1: SLASH@85..86 "/" [] []
+        2: HTML_TAG_NAME@86..94
+          0: HTML_LITERAL@86..94 "template" [] []
+        3: R_ANGLE@94..95 ">" [] []
+  4: EOF@95..96 "" [Newline("\n")] []
+
+```
diff --git a/crates/biome_html_parser/tests/html_specs/ok/vue/event-with-colon.vue.snap b/crates/biome_html_parser/tests/html_specs/ok/vue/event-with-colon.vue.snap
index 483aa9fde51e..66c7f28f952a 100644
--- a/crates/biome_html_parser/tests/html_specs/ok/vue/event-with-colon.vue.snap
+++ b/crates/biome_html_parser/tests/html_specs/ok/vue/event-with-colon.vue.snap
@@ -20,7 +20,7 @@ HtmlRoot {
     html: HtmlElementList [
         HtmlSelfClosingElement {
             l_angle_token: L_ANGLE@0..1 "<" [] [],
-            name: HtmlTagName {
+            name: HtmlComponentName {
                 value_token: HTML_LITERAL@1..5 "Foo" [] [Whitespace(" ")],
             },
             attributes: HtmlAttributeList [
@@ -56,7 +56,7 @@ HtmlRoot {
   3: HTML_ELEMENT_LIST@0..37
     0: HTML_SELF_CLOSING_ELEMENT@0..37
       0: L_ANGLE@0..1 "<" [] []
-      1: HTML_TAG_NAME@1..5
+      1: HTML_COMPONENT_NAME@1..5
         0: HTML_LITERAL@1..5 "Foo" [] [Whitespace(" ")]
       2: HTML_ATTRIBUTE_LIST@5..35
         0: VUE_V_ON_SHORTHAND_DIRECTIVE@5..35
diff --git a/crates/biome_html_parser/tests/html_specs/ok/vue/issue-8174.vue.snap b/crates/biome_html_parser/tests/html_specs/ok/vue/issue-8174.vue.snap
index e52b43981eb5..70c3e858db2f 100644
--- a/crates/biome_html_parser/tests/html_specs/ok/vue/issue-8174.vue.snap
+++ b/crates/biome_html_parser/tests/html_specs/ok/vue/issue-8174.vue.snap
@@ -21,7 +21,7 @@ HtmlRoot {
     html: HtmlElementList [
         HtmlSelfClosingElement {
             l_angle_token: L_ANGLE@0..1 "<" [] [],
-            name: HtmlTagName {
+            name: HtmlComponentName {
                 value_token: HTML_LITERAL@1..11 "Component" [] [Whitespace(" ")],
             },
             attributes: HtmlAttributeList [
@@ -57,7 +57,7 @@ HtmlRoot {
         },
         HtmlSelfClosingElement {
             l_angle_token: L_ANGLE@46..48 "<" [Newline("\n")] [],
-            name: HtmlTagName {
+            name: HtmlComponentName {
                 value_token: HTML_LITERAL@48..58 "Component" [] [Whitespace(" ")],
             },
             attributes: HtmlAttributeList [
@@ -101,7 +101,7 @@ HtmlRoot {
   3: HTML_ELEMENT_LIST@0..83
     0: HTML_SELF_CLOSING_ELEMENT@0..46
       0: L_ANGLE@0..1 "<" [] []
-      1: HTML_TAG_NAME@1..11
+      1: HTML_COMPONENT_NAME@1..11
         0: HTML_LITERAL@1..11 "Component" [] [Whitespace(" ")]
       2: HTML_ATTRIBUTE_LIST@11..44
         0: VUE_DIRECTIVE@11..28
@@ -126,7 +126,7 @@ HtmlRoot {
       4: R_ANGLE@45..46 ">" [] []
     1: HTML_SELF_CLOSING_ELEMENT@46..83
       0: L_ANGLE@46..48 "<" [Newline("\n")] []
-      1: HTML_TAG_NAME@48..58
+      1: HTML_COMPONENT_NAME@48..58
         0: HTML_LITERAL@48..58 "Component" [] [Whitespace(" ")]
       2: HTML_ATTRIBUTE_LIST@58..81
         0: VUE_DIRECTIVE@58..65
diff --git a/crates/biome_html_parser/tests/html_specs/ok/vue/v-bind-dynamic.vue.snap b/crates/biome_html_parser/tests/html_specs/ok/vue/v-bind-dynamic.vue.snap
index f84c3c79dffa..825a6bbc822a 100644
--- a/crates/biome_html_parser/tests/html_specs/ok/vue/v-bind-dynamic.vue.snap
+++ b/crates/biome_html_parser/tests/html_specs/ok/vue/v-bind-dynamic.vue.snap
@@ -32,7 +32,7 @@ HtmlRoot {
             children: HtmlElementList [
                 HtmlSelfClosingElement {
                     l_angle_token: L_ANGLE@10..13 "<" [Newline("\n"), Whitespace("\t")] [],
-                    name: HtmlTagName {
+                    name: HtmlComponentName {
                         value_token: HTML_LITERAL@13..17 "Foo" [] [Whitespace(" ")],
                     },
                     attributes: HtmlAttributeList [
@@ -90,7 +90,7 @@ HtmlRoot {
       1: HTML_ELEMENT_LIST@10..32
         0: HTML_SELF_CLOSING_ELEMENT@10..32
           0: L_ANGLE@10..13 "<" [Newline("\n"), Whitespace("\t")] []
-          1: HTML_TAG_NAME@13..17
+          1: HTML_COMPONENT_NAME@13..17
             0: HTML_LITERAL@13..17 "Foo" [] [Whitespace(" ")]
           2: HTML_ATTRIBUTE_LIST@17..30
             0: VUE_V_BIND_SHORTHAND_DIRECTIVE@17..30
diff --git a/crates/biome_html_parser/tests/html_specs/ok/vue/v-bind-shorthand.vue.snap b/crates/biome_html_parser/tests/html_specs/ok/vue/v-bind-shorthand.vue.snap
index e2b18e2612eb..6b098a4ba349 100644
--- a/crates/biome_html_parser/tests/html_specs/ok/vue/v-bind-shorthand.vue.snap
+++ b/crates/biome_html_parser/tests/html_specs/ok/vue/v-bind-shorthand.vue.snap
@@ -33,7 +33,7 @@ HtmlRoot {
                 HtmlElement {
                     opening_element: HtmlOpeningElement {
                         l_angle_token: L_ANGLE@10..13 "<" [Newline("\n"), Whitespace("\t")] [],
-                        name: HtmlTagName {
+                        name: HtmlComponentName {
                             value_token: HTML_LITERAL@13..17 "Foo" [] [Whitespace(" ")],
                         },
                         attributes: HtmlAttributeList [
@@ -59,7 +59,7 @@ HtmlRoot {
                     closing_element: HtmlClosingElement {
                         l_angle_token: L_ANGLE@27..28 "<" [] [],
                         slash_token: SLASH@28..29 "/" [] [],
-                        name: HtmlTagName {
+                        name: HtmlComponentName {
                             value_token: HTML_LITERAL@29..32 "Foo" [] [],
                         },
                         r_angle_token: R_ANGLE@32..33 ">" [] [],
@@ -99,7 +99,7 @@ HtmlRoot {
         0: HTML_ELEMENT@10..33
           0: HTML_OPENING_ELEMENT@10..27
             0: L_ANGLE@10..13 "<" [Newline("\n"), Whitespace("\t")] []
-            1: HTML_TAG_NAME@13..17
+            1: HTML_COMPONENT_NAME@13..17
               0: HTML_LITERAL@13..17 "Foo" [] [Whitespace(" ")]
             2: HTML_ATTRIBUTE_LIST@17..26
               0: VUE_V_BIND_SHORTHAND_DIRECTIVE@17..26
@@ -117,7 +117,7 @@ HtmlRoot {
           2: HTML_CLOSING_ELEMENT@27..33
             0: L_ANGLE@27..28 "<" [] []
             1: SLASH@28..29 "/" [] []
-            2: HTML_TAG_NAME@29..32
+            2: HTML_COMPONENT_NAME@29..32
               0: HTML_LITERAL@29..32 "Foo" [] []
             3: R_ANGLE@32..33 ">" [] []
       2: HTML_CLOSING_ELEMENT@33..45
diff --git a/crates/biome_html_parser/tests/html_specs/ok/vue/v-bind.vue.snap b/crates/biome_html_parser/tests/html_specs/ok/vue/v-bind.vue.snap
index b97122d1298a..dee9054d234a 100644
--- a/crates/biome_html_parser/tests/html_specs/ok/vue/v-bind.vue.snap
+++ b/crates/biome_html_parser/tests/html_specs/ok/vue/v-bind.vue.snap
@@ -33,7 +33,7 @@ HtmlRoot {
                 HtmlElement {
                     opening_element: HtmlOpeningElement {
                         l_angle_token: L_ANGLE@10..13 "<" [Newline("\n"), Whitespace("\t")] [],
-                        name: HtmlTagName {
+                        name: HtmlComponentName {
                             value_token: HTML_LITERAL@13..17 "Foo" [] [Whitespace(" ")],
                         },
                         attributes: HtmlAttributeList [
@@ -60,7 +60,7 @@ HtmlRoot {
                     closing_element: HtmlClosingElement {
                         l_angle_token: L_ANGLE@33..34 "<" [] [],
                         slash_token: SLASH@34..35 "/" [] [],
-                        name: HtmlTagName {
+                        name: HtmlComponentName {
                             value_token: HTML_LITERAL@35..38 "Foo" [] [],
                         },
                         r_angle_token: R_ANGLE@38..39 ">" [] [],
@@ -100,7 +100,7 @@ HtmlRoot {
         0: HTML_ELEMENT@10..39
           0: HTML_OPENING_ELEMENT@10..33
             0: L_ANGLE@10..13 "<" [Newline("\n"), Whitespace("\t")] []
-            1: HTML_TAG_NAME@13..17
+            1: HTML_COMPONENT_NAME@13..17
               0: HTML_LITERAL@13..17 "Foo" [] [Whitespace(" ")]
             2: HTML_ATTRIBUTE_LIST@17..32
               0: VUE_DIRECTIVE@17..32
@@ -119,7 +119,7 @@ HtmlRoot {
           2: HTML_CLOSING_ELEMENT@33..39
             0: L_ANGLE@33..34 "<" [] []
             1: SLASH@34..35 "/" [] []
-            2: HTML_TAG_NAME@35..38
+            2: HTML_COMPONENT_NAME@35..38
               0: HTML_LITERAL@35..38 "Foo" [] []
             3: R_ANGLE@38..39 ">" [] []
       2: HTML_CLOSING_ELEMENT@39..51
diff --git a/crates/biome_html_parser/tests/html_specs/ok/vue/v-on-shorthand.vue.snap b/crates/biome_html_parser/tests/html_specs/ok/vue/v-on-shorthand.vue.snap
index a26574923f46..721e00fc020d 100644
--- a/crates/biome_html_parser/tests/html_specs/ok/vue/v-on-shorthand.vue.snap
+++ b/crates/biome_html_parser/tests/html_specs/ok/vue/v-on-shorthand.vue.snap
@@ -33,7 +33,7 @@ HtmlRoot {
                 HtmlElement {
                     opening_element: HtmlOpeningElement {
                         l_angle_token: L_ANGLE@10..13 "<" [Newline("\n"), Whitespace("\t")] [],
-                        name: HtmlTagName {
+                        name: HtmlComponentName {
                             value_token: HTML_LITERAL@13..17 "Foo" [] [Whitespace(" ")],
                         },
                         attributes: HtmlAttributeList [
@@ -57,7 +57,7 @@ HtmlRoot {
                     closing_element: HtmlClosingElement {
                         l_angle_token: L_ANGLE@47..48 "<" [] [],
                         slash_token: SLASH@48..49 "/" [] [],
-                        name: HtmlTagName {
+                        name: HtmlComponentName {
                             value_token: HTML_LITERAL@49..52 "Foo" [] [],
                         },
                         r_angle_token: R_ANGLE@52..53 ">" [] [],
@@ -97,7 +97,7 @@ HtmlRoot {
         0: HTML_ELEMENT@10..53
           0: HTML_OPENING_ELEMENT@10..47
             0: L_ANGLE@10..13 "<" [Newline("\n"), Whitespace("\t")] []
-            1: HTML_TAG_NAME@13..17
+            1: HTML_COMPONENT_NAME@13..17
               0: HTML_LITERAL@13..17 "Foo" [] [Whitespace(" ")]
             2: HTML_ATTRIBUTE_LIST@17..46
               0: VUE_V_ON_SHORTHAND_DIRECTIVE@17..46
@@ -114,7 +114,7 @@ HtmlRoot {
           2: HTML_CLOSING_ELEMENT@47..53
             0: L_ANGLE@47..48 "<" [] []
             1: SLASH@48..49 "/" [] []
-            2: HTML_TAG_NAME@49..52
+            2: HTML_COMPONENT_NAME@49..52
               0: HTML_LITERAL@49..52 "Foo" [] []
             3: R_ANGLE@52..53 ">" [] []
       2: HTML_CLOSING_ELEMENT@53..65
diff --git a/crates/biome_html_parser/tests/quick_test.rs b/crates/biome_html_parser/tests/quick_test.rs
index ee857fe5b4ce..2daec32ced79 100644
--- a/crates/biome_html_parser/tests/quick_test.rs
+++ b/crates/biome_html_parser/tests/quick_test.rs
@@ -5,13 +5,25 @@ use biome_test_utils::has_bogus_nodes_or_empty_slots;
 #[ignore]
 #[test]
 pub fn quick_test() {
-    let code = r#"<p style:width style:height>Multiple shorthand</p>
-
-
-<Base title="500"></Base>
+    let code = r#"    <script type="text/x-template" id="header-view-template">
+      <div class="draggable-header-view"
+        @mousedown="startDrag" @touchstart="startDrag"
+        @mousemove="onDrag" @touchmove="onDrag"
+        @mouseup="stopDrag" @touchend="stopDrag" @mouseleave="stopDrag">
+        <svg class="bg" width="320" height="560">
+          <path :d="headerPath" fill="3F51B5"></path>
+        </svg>
+        <div class="header">
+          <slot name="header"></slot>
+        </div>
+        <div class="content" :style="contentPosition">
+          <slot name="content"></slot>
+        </div>
+      </div>
+    </script>
 "#;
 
-    let source_type = HtmlFileSource::astro();
+    let source_type = HtmlFileSource::svelte();
     let options = HtmlParseOptions::from(&source_type);
     let root = parse_html(code, options);
     let syntax = root.syntax();
diff --git a/crates/biome_html_syntax/src/element_ext.rs b/crates/biome_html_syntax/src/element_ext.rs
index c8f240ace021..8a40d50f39bb 100644
--- a/crates/biome_html_syntax/src/element_ext.rs
+++ b/crates/biome_html_syntax/src/element_ext.rs
@@ -1,7 +1,8 @@
 use crate::{
-    AnyHtmlContent, AnyHtmlElement, AnyHtmlTextExpression, AnySvelteBlock, AstroEmbeddedContent,
-    HtmlAttribute, HtmlAttributeList, HtmlElement, HtmlEmbeddedContent, HtmlOpeningElement,
-    HtmlSelfClosingElement, HtmlSyntaxToken, HtmlTagName, ScriptType, inner_string_text,
+    AnyHtmlContent, AnyHtmlElement, AnyHtmlTagName, AnyHtmlTextExpression, AnySvelteBlock,
+    AstroEmbeddedContent, HtmlAttribute, HtmlAttributeList, HtmlElement, HtmlEmbeddedContent,
+    HtmlOpeningElement, HtmlSelfClosingElement, HtmlSyntaxToken, HtmlTagName, ScriptType,
+    inner_string_text,
 };
 use biome_rowan::{AstNodeList, SyntaxResult, TokenText, declare_node_union};
 
@@ -11,15 +12,46 @@ const VOID_ELEMENTS: &[&str] = &[
     "wbr",
 ];
 
+/// Helper to get the text value from any tag name variant
+fn get_tag_name_text(name: &AnyHtmlTagName) -> SyntaxResult<TokenText> {
+    match name {
+        AnyHtmlTagName::HtmlTagName(tag) => {
+            let token = tag.value_token()?;
+            Ok(token.token_text_trimmed())
+        }
+        AnyHtmlTagName::HtmlComponentName(component) => {
+            let token = component.value_token()?;
+            Ok(token.token_text_trimmed())
+        }
+        AnyHtmlTagName::HtmlMemberName(member) => {
+            // For member names like Component.Member, we need to get the object part
+            // (the base component name) since that's what we want to track
+            match member.object()? {
+                crate::AnyHtmlComponentObjectName::HtmlTagName(tag) => {
+                    let token = tag.value_token()?;
+                    Ok(token.token_text_trimmed())
+                }
+                crate::AnyHtmlComponentObjectName::HtmlComponentName(component) => {
+                    let token = component.value_token()?;
+                    Ok(token.token_text_trimmed())
+                }
+                crate::AnyHtmlComponentObjectName::HtmlMemberName(nested_member) => {
+                    // Recursively get the base name from nested members
+                    get_tag_name_text(&AnyHtmlTagName::HtmlMemberName(nested_member))
+                }
+            }
+        }
+    }
+}
+
 impl HtmlSelfClosingElement {
     /// Whether the current self-closing element is a void element.
     ///
     /// <https://html.spec.whatwg.org/#void-elements>
     pub fn is_void_element(&self) -> SyntaxResult<bool> {
         let name = self.name()?;
-        Ok(VOID_ELEMENTS
-            .binary_search(&name.value_token()?.text_trimmed())
-            .is_ok())
+        let name_text = get_tag_name_text(&name)?;
+        Ok(VOID_ELEMENTS.binary_search(&&*name_text).is_ok())
     }
 }
 
@@ -101,8 +133,7 @@ impl HtmlSelfClosingElement {
     /// Returns the tag name of the element (trimmed), if it has one.
     pub fn tag_name(&self) -> Option<TokenText> {
         let name = self.name().ok()?;
-        let name_token = name.value_token().ok()?;
-        Some(name_token.token_text_trimmed())
+        get_tag_name_text(&name).ok()
     }
 
     pub fn find_attribute_by_name(&self, name_to_lookup: &str) -> Option<HtmlAttribute> {
@@ -126,8 +157,7 @@ impl HtmlOpeningElement {
     /// Returns the tag name of the element (trimmed), if it has one.
     pub fn tag_name(&self) -> Option<TokenText> {
         let name = self.name().ok()?;
-        let name_token = name.value_token().ok()?;
-        Some(name_token.token_text_trimmed())
+        get_tag_name_text(&name).ok()
     }
 
     pub fn find_attribute_by_name(&self, name_to_lookup: &str) -> Option<HtmlAttribute> {
@@ -198,27 +228,27 @@ impl HtmlElement {
     }
 
     pub fn is_style_tag(&self) -> bool {
-        let Ok(name_token) = self
-            .opening_element()
-            .and_then(|el| el.name())
-            .and_then(|name| name.value_token())
-        else {
+        let Ok(name) = self.opening_element().and_then(|el| el.name()) else {
+            return false;
+        };
+
+        let Ok(name_text) = get_tag_name_text(&name) else {
             return false;
         };
 
-        name_token.text_trimmed().eq_ignore_ascii_case("style")
+        name_text.eq_ignore_ascii_case("style")
     }
 
     pub fn is_script_tag(&self) -> bool {
-        let Ok(name_token) = self
-            .opening_element()
-            .and_then(|el| el.name())
-            .and_then(|name| name.value_token())
-        else {
+        let Ok(name) = self.opening_element().and_then(|el| el.name()) else {
             return false;
         };
 
-        name_token.text_trimmed().eq_ignore_ascii_case("script")
+        let Ok(name_text) = get_tag_name_text(&name) else {
+            return false;
+        };
+
+        name_text.eq_ignore_ascii_case("script")
     }
 
     fn has_attribute(&self, name: &str, value: &str) -> bool {
@@ -266,7 +296,7 @@ impl HtmlElement {
         self.is_style_tag() && self.has_attribute("lang", "scss")
     }
 
-    pub fn name(&self) -> SyntaxResult<HtmlTagName> {
+    pub fn name(&self) -> SyntaxResult<AnyHtmlTagName> {
         self.opening_element()?.name()
     }
 }
@@ -285,12 +315,20 @@ impl HtmlTagName {
     }
 }
 
+impl AnyHtmlTagName {
+    /// Returns the trimmed token text of the tag name.
+    /// For member names like Component.Member, returns the full member expression text.
+    pub fn token_text_trimmed(&self) -> Option<TokenText> {
+        get_tag_name_text(self).ok()
+    }
+}
+
 declare_node_union! {
     pub AnyHtmlTagElement = HtmlOpeningElement | HtmlSelfClosingElement
 }
 
 impl AnyHtmlTagElement {
-    pub fn name(&self) -> SyntaxResult<HtmlTagName> {
+    pub fn name(&self) -> SyntaxResult<AnyHtmlTagName> {
         match self {
             Self::HtmlOpeningElement(element) => element.name(),
             Self::HtmlSelfClosingElement(element) => element.name(),
@@ -305,7 +343,29 @@ impl AnyHtmlTagElement {
     }
 
     pub fn name_value_token(&self) -> SyntaxResult<HtmlSyntaxToken> {
-        self.name()?.value_token()
+        let name = self.name()?;
+        match name {
+            AnyHtmlTagName::HtmlTagName(tag) => tag.value_token(),
+            AnyHtmlTagName::HtmlComponentName(component) => component.value_token(),
+            AnyHtmlTagName::HtmlMemberName(member) => {
+                // For member names, return the first token (the base component name)
+                match member.object()? {
+                    crate::AnyHtmlComponentObjectName::HtmlTagName(tag) => tag.value_token(),
+                    crate::AnyHtmlComponentObjectName::HtmlComponentName(component) => {
+                        component.value_token()
+                    }
+                    crate::AnyHtmlComponentObjectName::HtmlMemberName(_) => {
+                        // For deeply nested members, we'd need to recurse
+                        // For now, use syntax to get the first token
+                        use biome_rowan::AstNode;
+                        member
+                            .syntax()
+                            .first_token()
+                            .ok_or_else(|| biome_rowan::SyntaxError::MissingRequiredChild)
+                    }
+                }
+            }
+        }
     }
 
     pub fn find_attribute_by_name(&self, name_to_lookup: &str) -> Option<HtmlAttribute> {
diff --git a/crates/biome_html_syntax/src/generated/kind.rs b/crates/biome_html_syntax/src/generated/kind.rs
index 1ed89eb97344..b18ba3bbfd5c 100644
--- a/crates/biome_html_syntax/src/generated/kind.rs
+++ b/crates/biome_html_syntax/src/generated/kind.rs
@@ -83,6 +83,8 @@ pub enum HtmlSyntaxKind {
     HTML_ATTRIBUTE_INITIALIZER_CLAUSE,
     HTML_STRING,
     HTML_TAG_NAME,
+    HTML_COMPONENT_NAME,
+    HTML_MEMBER_NAME,
     HTML_ATTRIBUTE_NAME,
     HTML_ELEMENT_LIST,
     HTML_ATTRIBUTE_LIST,
diff --git a/crates/biome_html_syntax/src/generated/macros.rs b/crates/biome_html_syntax/src/generated/macros.rs
index 87099a4cdfd1..d96f6e40037f 100644
--- a/crates/biome_html_syntax/src/generated/macros.rs
+++ b/crates/biome_html_syntax/src/generated/macros.rs
@@ -45,6 +45,10 @@ macro_rules! map_syntax_node {
                     let $pattern = unsafe { $crate::HtmlClosingElement::new_unchecked(node) };
                     $body
                 }
+                $crate::HtmlSyntaxKind::HTML_COMPONENT_NAME => {
+                    let $pattern = unsafe { $crate::HtmlComponentName::new_unchecked(node) };
+                    $body
+                }
                 $crate::HtmlSyntaxKind::HTML_CONTENT => {
                     let $pattern = unsafe { $crate::HtmlContent::new_unchecked(node) };
                     $body
@@ -65,6 +69,10 @@ macro_rules! map_syntax_node {
                     let $pattern = unsafe { $crate::HtmlEmbeddedContent::new_unchecked(node) };
                     $body
                 }
+                $crate::HtmlSyntaxKind::HTML_MEMBER_NAME => {
+                    let $pattern = unsafe { $crate::HtmlMemberName::new_unchecked(node) };
+                    $body
+                }
                 $crate::HtmlSyntaxKind::HTML_OPENING_ELEMENT => {
                     let $pattern = unsafe { $crate::HtmlOpeningElement::new_unchecked(node) };
                     $body
diff --git a/crates/biome_html_syntax/src/generated/nodes.rs b/crates/biome_html_syntax/src/generated/nodes.rs
index bfd6abf11fd1..6a4f7e5ac019 100644
--- a/crates/biome_html_syntax/src/generated/nodes.rs
+++ b/crates/biome_html_syntax/src/generated/nodes.rs
@@ -287,7 +287,7 @@ impl HtmlClosingElement {
     pub fn slash_token(&self) -> SyntaxResult<SyntaxToken> {
         support::required_token(&self.syntax, 1usize)
     }
-    pub fn name(&self) -> SyntaxResult<HtmlTagName> {
+    pub fn name(&self) -> SyntaxResult<AnyHtmlTagName> {
         support::required_node(&self.syntax, 2usize)
     }
     pub fn r_angle_token(&self) -> SyntaxResult<SyntaxToken> {
@@ -306,10 +306,45 @@ impl Serialize for HtmlClosingElement {
 pub struct HtmlClosingElementFields {
     pub l_angle_token: SyntaxResult<SyntaxToken>,
     pub slash_token: SyntaxResult<SyntaxToken>,
-    pub name: SyntaxResult<HtmlTagName>,
+    pub name: SyntaxResult<AnyHtmlTagName>,
     pub r_angle_token: SyntaxResult<SyntaxToken>,
 }
 #[derive(Clone, PartialEq, Eq, Hash)]
+pub struct HtmlComponentName {
+    pub(crate) syntax: SyntaxNode,
+}
+impl HtmlComponentName {
+    #[doc = r" Create an AstNode from a SyntaxNode without checking its kind"]
+    #[doc = r""]
+    #[doc = r" # Safety"]
+    #[doc = r" This function must be guarded with a call to [AstNode::can_cast]"]
+    #[doc = r" or a match on [SyntaxNode::kind]"]
+    #[inline]
+    pub const unsafe fn new_unchecked(syntax: SyntaxNode) -> Self {
+        Self { syntax }
+    }
+    pub fn as_fields(&self) -> HtmlComponentNameFields {
+        HtmlComponentNameFields {
+            value_token: self.value_token(),
+        }
+    }
+    pub fn value_token(&self) -> SyntaxResult<SyntaxToken> {
+        support::required_token(&self.syntax, 0usize)
+    }
+}
+impl Serialize for HtmlComponentName {
+    fn serialize<S>(&self, serializer: S) -> Result<S::Ok, S::Error>
+    where
+        S: Serializer,
+    {
+        self.as_fields().serialize(serializer)
+    }
+}
+#[derive(Serialize)]
+pub struct HtmlComponentNameFields {
+    pub value_token: SyntaxResult<SyntaxToken>,
+}
+#[derive(Clone, PartialEq, Eq, Hash)]
 pub struct HtmlContent {
     pub(crate) syntax: SyntaxNode,
 }
@@ -540,6 +575,51 @@ pub struct HtmlEmbeddedContentFields {
     pub value_token: SyntaxResult<SyntaxToken>,
 }
 #[derive(Clone, PartialEq, Eq, Hash)]
+pub struct HtmlMemberName {
+    pub(crate) syntax: SyntaxNode,
+}
+impl HtmlMemberName {
+    #[doc = r" Create an AstNode from a SyntaxNode without checking its kind"]
+    #[doc = r""]
+    #[doc = r" # Safety"]
+    #[doc = r" This function must be guarded with a call to [AstNode::can_cast]"]
+    #[doc = r" or a match on [SyntaxNode::kind]"]
+    #[inline]
+    pub const unsafe fn new_unchecked(syntax: SyntaxNode) -> Self {
+        Self { syntax }
+    }
+    pub fn as_fields(&self) -> HtmlMemberNameFields {
+        HtmlMemberNameFields {
+            object: self.object(),
+            dot_token: self.dot_token(),
+            member: self.member(),
+        }
+    }
+    pub fn object(&self) -> SyntaxResult<AnyHtmlComponentObjectName> {
+        support::required_node(&self.syntax, 0usize)
+    }
+    pub fn dot_token(&self) -> SyntaxResult<SyntaxToken> {
+        support::required_token(&self.syntax, 1usize)
+    }
+    pub fn member(&self) -> SyntaxResult<HtmlTagName> {
+        support::required_node(&self.syntax, 2usize)
+    }
+}
+impl Serialize for HtmlMemberName {
+    fn serialize<S>(&self, serializer: S) -> Result<S::Ok, S::Error>
+    where
+        S: Serializer,
+    {
+        self.as_fields().serialize(serializer)
+    }
+}
+#[derive(Serialize)]
+pub struct HtmlMemberNameFields {
+    pub object: SyntaxResult<AnyHtmlComponentObjectName>,
+    pub dot_token: SyntaxResult<SyntaxToken>,
+    pub member: SyntaxResult<HtmlTagName>,
+}
+#[derive(Clone, PartialEq, Eq, Hash)]
 pub struct HtmlOpeningElement {
     pub(crate) syntax: SyntaxNode,
 }
@@ -564,7 +644,7 @@ impl HtmlOpeningElement {
     pub fn l_angle_token(&self) -> SyntaxResult<SyntaxToken> {
         support::required_token(&self.syntax, 0usize)
     }
-    pub fn name(&self) -> SyntaxResult<HtmlTagName> {
+    pub fn name(&self) -> SyntaxResult<AnyHtmlTagName> {
         support::required_node(&self.syntax, 1usize)
     }
     pub fn attributes(&self) -> HtmlAttributeList {
@@ -585,7 +665,7 @@ impl Serialize for HtmlOpeningElement {
 #[derive(Serialize)]
 pub struct HtmlOpeningElementFields {
     pub l_angle_token: SyntaxResult<SyntaxToken>,
-    pub name: SyntaxResult<HtmlTagName>,
+    pub name: SyntaxResult<AnyHtmlTagName>,
     pub attributes: HtmlAttributeList,
     pub r_angle_token: SyntaxResult<SyntaxToken>,
 }
@@ -670,7 +750,7 @@ impl HtmlSelfClosingElement {
     pub fn l_angle_token(&self) -> SyntaxResult<SyntaxToken> {
         support::required_token(&self.syntax, 0usize)
     }
-    pub fn name(&self) -> SyntaxResult<HtmlTagName> {
+    pub fn name(&self) -> SyntaxResult<AnyHtmlTagName> {
         support::required_node(&self.syntax, 1usize)
     }
     pub fn attributes(&self) -> HtmlAttributeList {
@@ -694,7 +774,7 @@ impl Serialize for HtmlSelfClosingElement {
 #[derive(Serialize)]
 pub struct HtmlSelfClosingElementFields {
     pub l_angle_token: SyntaxResult<SyntaxToken>,
-    pub name: SyntaxResult<HtmlTagName>,
+    pub name: SyntaxResult<AnyHtmlTagName>,
     pub attributes: HtmlAttributeList,
     pub slash_token: Option<SyntaxToken>,
     pub r_angle_token: SyntaxResult<SyntaxToken>,
@@ -3362,6 +3442,32 @@ impl AnyHtmlAttributeInitializer {
     }
 }
 #[derive(Clone, PartialEq, Eq, Hash, Serialize)]
+pub enum AnyHtmlComponentObjectName {
+    HtmlComponentName(HtmlComponentName),
+    HtmlMemberName(HtmlMemberName),
+    HtmlTagName(HtmlTagName),
+}
+impl AnyHtmlComponentObjectName {
+    pub fn as_html_component_name(&self) -> Option<&HtmlComponentName> {
+        match &self {
+            Self::HtmlComponentName(item) => Some(item),
+            _ => None,
+        }
+    }
+    pub fn as_html_member_name(&self) -> Option<&HtmlMemberName> {
+        match &self {
+            Self::HtmlMemberName(item) => Some(item),
+            _ => None,
+        }
+    }
+    pub fn as_html_tag_name(&self) -> Option<&HtmlTagName> {
+        match &self {
+            Self::HtmlTagName(item) => Some(item),
+            _ => None,
+        }
+    }
+}
+#[derive(Clone, PartialEq, Eq, Hash, Serialize)]
 pub enum AnyHtmlContent {
     AnyHtmlTextExpression(AnyHtmlTextExpression),
     HtmlContent(HtmlContent),
@@ -3428,6 +3534,32 @@ impl AnyHtmlElement {
     }
 }
 #[derive(Clone, PartialEq, Eq, Hash, Serialize)]
+pub enum AnyHtmlTagName {
+    HtmlComponentName(HtmlComponentName),
+    HtmlMemberName(HtmlMemberName),
+    HtmlTagName(HtmlTagName),
+}
+impl AnyHtmlTagName {
+    pub fn as_html_component_name(&self) -> Option<&HtmlComponentName> {
+        match &self {
+            Self::HtmlComponentName(item) => Some(item),
+            _ => None,
+        }
+    }
+    pub fn as_html_member_name(&self) -> Option<&HtmlMemberName> {
+        match &self {
+            Self::HtmlMemberName(item) => Some(item),
+            _ => None,
+        }
+    }
+    pub fn as_html_tag_name(&self) -> Option<&HtmlTagName> {
+        match &self {
+            Self::HtmlTagName(item) => Some(item),
+            _ => None,
+        }
+    }
+}
+#[derive(Clone, PartialEq, Eq, Hash, Serialize)]
 pub enum AnyHtmlTextExpression {
     AnySvelteBlock(AnySvelteBlock),
     HtmlBogusTextExpression(HtmlBogusTextExpression),
@@ -4161,6 +4293,56 @@ impl From<HtmlClosingElement> for SyntaxElement {
         n.syntax.into()
     }
 }
+impl AstNode for HtmlComponentName {
+    type Language = Language;
+    const KIND_SET: SyntaxKindSet<Language> =
+        SyntaxKindSet::from_raw(RawSyntaxKind(HTML_COMPONENT_NAME as u16));
+    fn can_cast(kind: SyntaxKind) -> bool {
+        kind == HTML_COMPONENT_NAME
+    }
+    fn cast(syntax: SyntaxNode) -> Option<Self> {
+        if Self::can_cast(syntax.kind()) {
+            Some(Self { syntax })
+        } else {
+            None
+        }
+    }
+    fn syntax(&self) -> &SyntaxNode {
+        &self.syntax
+    }
+    fn into_syntax(self) -> SyntaxNode {
+        self.syntax
+    }
+}
+impl std::fmt::Debug for HtmlComponentName {
+    fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
+        thread_local! { static DEPTH : std :: cell :: Cell < u8 > = const { std :: cell :: Cell :: new (0) } };
+        let current_depth = DEPTH.get();
+        let result = if current_depth < 16 {
+            DEPTH.set(current_depth + 1);
+            f.debug_struct("HtmlComponentName")
+                .field(
+                    "value_token",
+                    &support::DebugSyntaxResult(self.value_token()),
+                )
+                .finish()
+        } else {
+            f.debug_struct("HtmlComponentName").finish()
+        };
+        DEPTH.set(current_depth);
+        result
+    }
+}
+impl From<HtmlComponentName> for SyntaxNode {
+    fn from(n: HtmlComponentName) -> Self {
+        n.syntax
+    }
+}
+impl From<HtmlComponentName> for SyntaxElement {
+    fn from(n: HtmlComponentName) -> Self {
+        n.syntax.into()
+    }
+}
 impl AstNode for HtmlContent {
     type Language = Language;
     const KIND_SET: SyntaxKindSet<Language> =
@@ -4446,6 +4628,55 @@ impl From<HtmlEmbeddedContent> for SyntaxElement {
         n.syntax.into()
     }
 }
+impl AstNode for HtmlMemberName {
+    type Language = Language;
+    const KIND_SET: SyntaxKindSet<Language> =
+        SyntaxKindSet::from_raw(RawSyntaxKind(HTML_MEMBER_NAME as u16));
+    fn can_cast(kind: SyntaxKind) -> bool {
+        kind == HTML_MEMBER_NAME
+    }
+    fn cast(syntax: SyntaxNode) -> Option<Self> {
+        if Self::can_cast(syntax.kind()) {
+            Some(Self { syntax })
+        } else {
+            None
+        }
+    }
+    fn syntax(&self) -> &SyntaxNode {
+        &self.syntax
+    }
+    fn into_syntax(self) -> SyntaxNode {
+        self.syntax
+    }
+}
+impl std::fmt::Debug for HtmlMemberName {
+    fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
+        thread_local! { static DEPTH : std :: cell :: Cell < u8 > = const { std :: cell :: Cell :: new (0) } };
+        let current_depth = DEPTH.get();
+        let result = if current_depth < 16 {
+            DEPTH.set(current_depth + 1);
+            f.debug_struct("HtmlMemberName")
+                .field("object", &support::DebugSyntaxResult(self.object()))
+                .field("dot_token", &support::DebugSyntaxResult(self.dot_token()))
+                .field("member", &support::DebugSyntaxResult(self.member()))
+                .finish()
+        } else {
+            f.debug_struct("HtmlMemberName").finish()
+        };
+        DEPTH.set(current_depth);
+        result
+    }
+}
+impl From<HtmlMemberName> for SyntaxNode {
+    fn from(n: HtmlMemberName) -> Self {
+        n.syntax
+    }
+}
+impl From<HtmlMemberName> for SyntaxElement {
+    fn from(n: HtmlMemberName) -> Self {
+        n.syntax.into()
+    }
+}
 impl AstNode for HtmlOpeningElement {
     type Language = Language;
     const KIND_SET: SyntaxKindSet<Language> =
@@ -7947,6 +8178,77 @@ impl From<AnyHtmlAttributeInitializer> for SyntaxElement {
         node.into()
     }
 }
+impl From<HtmlComponentName> for AnyHtmlComponentObjectName {
+    fn from(node: HtmlComponentName) -> Self {
+        Self::HtmlComponentName(node)
+    }
+}
+impl From<HtmlMemberName> for AnyHtmlComponentObjectName {
+    fn from(node: HtmlMemberName) -> Self {
+        Self::HtmlMemberName(node)
+    }
+}
+impl From<HtmlTagName> for AnyHtmlComponentObjectName {
+    fn from(node: HtmlTagName) -> Self {
+        Self::HtmlTagName(node)
+    }
+}
+impl AstNode for AnyHtmlComponentObjectName {
+    type Language = Language;
+    const KIND_SET: SyntaxKindSet<Language> = HtmlComponentName::KIND_SET
+        .union(HtmlMemberName::KIND_SET)
+        .union(HtmlTagName::KIND_SET);
+    fn can_cast(kind: SyntaxKind) -> bool {
+        matches!(kind, HTML_COMPONENT_NAME | HTML_MEMBER_NAME | HTML_TAG_NAME)
+    }
+    fn cast(syntax: SyntaxNode) -> Option<Self> {
+        let res = match syntax.kind() {
+            HTML_COMPONENT_NAME => Self::HtmlComponentName(HtmlComponentName { syntax }),
+            HTML_MEMBER_NAME => Self::HtmlMemberName(HtmlMemberName { syntax }),
+            HTML_TAG_NAME => Self::HtmlTagName(HtmlTagName { syntax }),
+            _ => return None,
+        };
+        Some(res)
+    }
+    fn syntax(&self) -> &SyntaxNode {
+        match self {
+            Self::HtmlComponentName(it) => it.syntax(),
+            Self::HtmlMemberName(it) => it.syntax(),
+            Self::HtmlTagName(it) => it.syntax(),
+        }
+    }
+    fn into_syntax(self) -> SyntaxNode {
+        match self {
+            Self::HtmlComponentName(it) => it.into_syntax(),
+            Self::HtmlMemberName(it) => it.into_syntax(),
+            Self::HtmlTagName(it) => it.into_syntax(),
+        }
+    }
+}
+impl std::fmt::Debug for AnyHtmlComponentObjectName {
+    fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
+        match self {
+            Self::HtmlComponentName(it) => std::fmt::Debug::fmt(it, f),
+            Self::HtmlMemberName(it) => std::fmt::Debug::fmt(it, f),
+            Self::HtmlTagName(it) => std::fmt::Debug::fmt(it, f),
+        }
+    }
+}
+impl From<AnyHtmlComponentObjectName> for SyntaxNode {
+    fn from(n: AnyHtmlComponentObjectName) -> Self {
+        match n {
+            AnyHtmlComponentObjectName::HtmlComponentName(it) => it.into_syntax(),
+            AnyHtmlComponentObjectName::HtmlMemberName(it) => it.into_syntax(),
+            AnyHtmlComponentObjectName::HtmlTagName(it) => it.into_syntax(),
+        }
+    }
+}
+impl From<AnyHtmlComponentObjectName> for SyntaxElement {
+    fn from(n: AnyHtmlComponentObjectName) -> Self {
+        let node: SyntaxNode = n.into();
+        node.into()
+    }
+}
 impl From<HtmlContent> for AnyHtmlContent {
     fn from(node: HtmlContent) -> Self {
         Self::HtmlContent(node)
@@ -8121,6 +8423,77 @@ impl From<AnyHtmlElement> for SyntaxElement {
         node.into()
     }
 }
+impl From<HtmlComponentName> for AnyHtmlTagName {
+    fn from(node: HtmlComponentName) -> Self {
+        Self::HtmlComponentName(node)
+    }
+}
+impl From<HtmlMemberName> for AnyHtmlTagName {
+    fn from(node: HtmlMemberName) -> Self {
+        Self::HtmlMemberName(node)
+    }
+}
+impl From<HtmlTagName> for AnyHtmlTagName {
+    fn from(node: HtmlTagName) -> Self {
+        Self::HtmlTagName(node)
+    }
+}
+impl AstNode for AnyHtmlTagName {
+    type Language = Language;
+    const KIND_SET: SyntaxKindSet<Language> = HtmlComponentName::KIND_SET
+        .union(HtmlMemberName::KIND_SET)
+        .union(HtmlTagName::KIND_SET);
+    fn can_cast(kind: SyntaxKind) -> bool {
+        matches!(kind, HTML_COMPONENT_NAME | HTML_MEMBER_NAME | HTML_TAG_NAME)
+    }
+    fn cast(syntax: SyntaxNode) -> Option<Self> {
+        let res = match syntax.kind() {
+            HTML_COMPONENT_NAME => Self::HtmlComponentName(HtmlComponentName { syntax }),
+            HTML_MEMBER_NAME => Self::HtmlMemberName(HtmlMemberName { syntax }),
+            HTML_TAG_NAME => Self::HtmlTagName(HtmlTagName { syntax }),
+            _ => return None,
+        };
+        Some(res)
+    }
+    fn syntax(&self) -> &SyntaxNode {
+        match self {
+            Self::HtmlComponentName(it) => it.syntax(),
+            Self::HtmlMemberName(it) => it.syntax(),
+            Self::HtmlTagName(it) => it.syntax(),
+        }
+    }
+    fn into_syntax(self) -> SyntaxNode {
+        match self {
+            Self::HtmlComponentName(it) => it.into_syntax(),
+            Self::HtmlMemberName(it) => it.into_syntax(),
+            Self::HtmlTagName(it) => it.into_syntax(),
+        }
+    }
+}
+impl std::fmt::Debug for AnyHtmlTagName {
+    fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
+        match self {
+            Self::HtmlComponentName(it) => std::fmt::Debug::fmt(it, f),
+            Self::HtmlMemberName(it) => std::fmt::Debug::fmt(it, f),
+            Self::HtmlTagName(it) => std::fmt::Debug::fmt(it, f),
+        }
+    }
+}
+impl From<AnyHtmlTagName> for SyntaxNode {
+    fn from(n: AnyHtmlTagName) -> Self {
+        match n {
+            AnyHtmlTagName::HtmlComponentName(it) => it.into_syntax(),
+            AnyHtmlTagName::HtmlMemberName(it) => it.into_syntax(),
+            AnyHtmlTagName::HtmlTagName(it) => it.into_syntax(),
+        }
+    }
+}
+impl From<AnyHtmlTagName> for SyntaxElement {
+    fn from(n: AnyHtmlTagName) -> Self {
+        let node: SyntaxNode = n.into();
+        node.into()
+    }
+}
 impl From<HtmlBogusTextExpression> for AnyHtmlTextExpression {
     fn from(node: HtmlBogusTextExpression) -> Self {
         Self::HtmlBogusTextExpression(node)
@@ -9112,6 +9485,11 @@ impl std::fmt::Display for AnyHtmlAttributeInitializer {
         std::fmt::Display::fmt(self.syntax(), f)
     }
 }
+impl std::fmt::Display for AnyHtmlComponentObjectName {
+    fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
+        std::fmt::Display::fmt(self.syntax(), f)
+    }
+}
 impl std::fmt::Display for AnyHtmlContent {
     fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
         std::fmt::Display::fmt(self.syntax(), f)
@@ -9122,6 +9500,11 @@ impl std::fmt::Display for AnyHtmlElement {
         std::fmt::Display::fmt(self.syntax(), f)
     }
 }
+impl std::fmt::Display for AnyHtmlTagName {
+    fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
+        std::fmt::Display::fmt(self.syntax(), f)
+    }
+}
 impl std::fmt::Display for AnyHtmlTextExpression {
     fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
         std::fmt::Display::fmt(self.syntax(), f)
@@ -9212,6 +9595,11 @@ impl std::fmt::Display for HtmlClosingElement {
         std::fmt::Display::fmt(self.syntax(), f)
     }
 }
+impl std::fmt::Display for HtmlComponentName {
+    fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
+        std::fmt::Display::fmt(self.syntax(), f)
+    }
+}
 impl std::fmt::Display for HtmlContent {
     fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
         std::fmt::Display::fmt(self.syntax(), f)
@@ -9237,6 +9625,11 @@ impl std::fmt::Display for HtmlEmbeddedContent {
         std::fmt::Display::fmt(self.syntax(), f)
     }
 }
+impl std::fmt::Display for HtmlMemberName {
+    fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
+        std::fmt::Display::fmt(self.syntax(), f)
+    }
+}
 impl std::fmt::Display for HtmlOpeningElement {
     fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
         std::fmt::Display::fmt(self.syntax(), f)
diff --git a/crates/biome_html_syntax/src/generated/nodes_mut.rs b/crates/biome_html_syntax/src/generated/nodes_mut.rs
index 41202173dd73..34e63b00384b 100644
--- a/crates/biome_html_syntax/src/generated/nodes_mut.rs
+++ b/crates/biome_html_syntax/src/generated/nodes_mut.rs
@@ -100,7 +100,7 @@ impl HtmlClosingElement {
                 .splice_slots(1usize..=1usize, once(Some(element.into()))),
         )
     }
-    pub fn with_name(self, element: HtmlTagName) -> Self {
+    pub fn with_name(self, element: AnyHtmlTagName) -> Self {
         Self::unwrap_cast(
             self.syntax
                 .splice_slots(2usize..=2usize, once(Some(element.into_syntax().into()))),
@@ -113,6 +113,14 @@ impl HtmlClosingElement {
         )
     }
 }
+impl HtmlComponentName {
+    pub fn with_value_token(self, element: SyntaxToken) -> Self {
+        Self::unwrap_cast(
+            self.syntax
+                .splice_slots(0usize..=0usize, once(Some(element.into()))),
+        )
+    }
+}
 impl HtmlContent {
     pub fn with_value_token(self, element: SyntaxToken) -> Self {
         Self::unwrap_cast(
@@ -219,6 +227,26 @@ impl HtmlEmbeddedContent {
         )
     }
 }
+impl HtmlMemberName {
+    pub fn with_object(self, element: AnyHtmlComponentObjectName) -> Self {
+        Self::unwrap_cast(
+            self.syntax
+                .splice_slots(0usize..=0usize, once(Some(element.into_syntax().into()))),
+        )
+    }
+    pub fn with_dot_token(self, element: SyntaxToken) -> Self {
+        Self::unwrap_cast(
+            self.syntax
+                .splice_slots(1usize..=1usize, once(Some(element.into()))),
+        )
+    }
+    pub fn with_member(self, element: HtmlTagName) -> Self {
+        Self::unwrap_cast(
+            self.syntax
+                .splice_slots(2usize..=2usize, once(Some(element.into_syntax().into()))),
+        )
+    }
+}
 impl HtmlOpeningElement {
     pub fn with_l_angle_token(self, element: SyntaxToken) -> Self {
         Self::unwrap_cast(
@@ -226,7 +254,7 @@ impl HtmlOpeningElement {
                 .splice_slots(0usize..=0usize, once(Some(element.into()))),
         )
     }
-    pub fn with_name(self, element: HtmlTagName) -> Self {
+    pub fn with_name(self, element: AnyHtmlTagName) -> Self {
         Self::unwrap_cast(
             self.syntax
                 .splice_slots(1usize..=1usize, once(Some(element.into_syntax().into()))),
@@ -284,7 +312,7 @@ impl HtmlSelfClosingElement {
                 .splice_slots(0usize..=0usize, once(Some(element.into()))),
         )
     }
-    pub fn with_name(self, element: HtmlTagName) -> Self {
+    pub fn with_name(self, element: AnyHtmlTagName) -> Self {
         Self::unwrap_cast(
             self.syntax
                 .splice_slots(1usize..=1usize, once(Some(element.into_syntax().into()))),
diff --git a/crates/biome_js_analyze/src/lint/style/use_import_type.rs b/crates/biome_js_analyze/src/lint/style/use_import_type.rs
index c465bfffc91c..972d0d616b3e 100644
--- a/crates/biome_js_analyze/src/lint/style/use_import_type.rs
+++ b/crates/biome_js_analyze/src/lint/style/use_import_type.rs
@@ -827,7 +827,7 @@ fn is_only_used_as_type(
 ) -> bool {
     // First check if the binding is used as a value in embedded non-source snippets (templates)
     if let Ok(name_token) = binding.name_token()
-        && references.is_used_as_value(name_token.text())
+        && references.is_used_as_value(name_token.text_trimmed())
     {
         return false;
     }
diff --git a/crates/biome_service/src/file_handlers/css.rs b/crates/biome_service/src/file_handlers/css.rs
index fdd1e1240527..e8fd579c3bb8 100644
--- a/crates/biome_service/src/file_handlers/css.rs
+++ b/crates/biome_service/src/file_handlers/css.rs
@@ -566,10 +566,10 @@ fn lint(params: LintParams) -> LintResults {
 
     let mut process_lint = ProcessLint::new(&params);
     let css_services = CssAnalyzerServices {
-        semantic_model: params
-            .document_services
-            .as_css_services()
-            .and_then(|services| services.semantic_model.as_ref()),
+        semantic_model: params.snippet_services.and_then(|s| {
+            s.as_css_services()
+                .and_then(|services| services.semantic_model.as_ref())
+        }),
         file_source,
     };
     let (_, analyze_diagnostics) = analyze(
diff --git a/crates/biome_service/src/file_handlers/javascript.rs b/crates/biome_service/src/file_handlers/javascript.rs
index 46198c192ba9..485c76a79abb 100644
--- a/crates/biome_service/src/file_handlers/javascript.rs
+++ b/crates/biome_service/src/file_handlers/javascript.rs
@@ -925,7 +925,7 @@ pub(crate) fn lint(params: LintParams) -> LintResults {
     let mut services =
         JsAnalyzerServices::from((params.module_graph, params.project_layout, file_source));
 
-    if let Some(embedded_bindings) = params.embedded_exported_bindings {
+    if let Some(embedded_bindings) = params.document_services.embedded_bindings() {
         services.set_embedded_bindings(embedded_bindings.bindings)
     }
 
diff --git a/crates/biome_service/src/file_handlers/mod.rs b/crates/biome_service/src/file_handlers/mod.rs
index 70312019174f..a6e0048f810b 100644
--- a/crates/biome_service/src/file_handlers/mod.rs
+++ b/crates/biome_service/src/file_handlers/mod.rs
@@ -11,9 +11,7 @@ pub use crate::file_handlers::svelte::SvelteFileHandler;
 pub use crate::file_handlers::vue::VueFileHandler;
 use crate::settings::{Settings, SettingsWithEditor};
 use crate::utils::growth_guard::GrowthGuard;
-use crate::workspace::document::services::embedded_bindings::{
-    EmbeddedBuilder, EmbeddedExportedBindings,
-};
+use crate::workspace::document::services::embedded_bindings::EmbeddedBuilder;
 use crate::workspace::{
     AnyEmbeddedSnippet, CodeAction, DocumentServices, FixAction, FixFileMode, FixFileResult,
     GetSyntaxTreeResult, PullActionsResult, PullDiagnosticsAndActionsResult, RenameResult,
@@ -563,7 +561,7 @@ pub(crate) struct LintParams<'a> {
     pub(crate) pull_code_actions: bool,
     pub(crate) diagnostic_offset: Option<TextSize>,
     pub(crate) document_services: &'a DocumentServices,
-    pub(crate) embedded_exported_bindings: Option<EmbeddedExportedBindings>,
+    pub(crate) snippet_services: Option<&'a DocumentServices>,
 }
 
 pub(crate) struct DiagnosticsAndActionsParams<'a> {
diff --git a/crates/biome_service/src/workspace/document/services/embedded_value_references.rs b/crates/biome_service/src/workspace/document/services/embedded_value_references.rs
index 2715fdda3a8b..b1525964e1e4 100644
--- a/crates/biome_service/src/workspace/document/services/embedded_value_references.rs
+++ b/crates/biome_service/src/workspace/document/services/embedded_value_references.rs
@@ -1,3 +1,6 @@
+use biome_html_syntax::{
+    AnyHtmlComponentObjectName, AnyHtmlTagName, HtmlElement, HtmlRoot, HtmlSelfClosingElement,
+};
 use biome_js_syntax::{
     AnyJsIdentifierUsage, AnyJsRoot, JsReferenceIdentifier, JsStaticMemberExpression,
 };
@@ -49,6 +52,96 @@ impl EmbeddedValueReferencesBuilder {
         }
     }
 
+    /// Visit an HTML root to track component element names as value references.
+    ///
+    /// This extracts component names from Vue/Svelte templates like:
+    /// - `<Component />` → tracks `Component`
+    /// - `<AvatarPrimitive.Fallback>` → tracks `AvatarPrimitive`
+    pub(crate) fn visit_html_root(&mut self, root: &HtmlRoot) {
+        for node in root.syntax().descendants() {
+            // Check HtmlElement: <Component>...</Component>
+            if let Some(element) = HtmlElement::cast_ref(&node) {
+                self.visit_html_element(&element);
+            }
+
+            // Check HtmlSelfClosingElement: <Component />
+            if let Some(element) = HtmlSelfClosingElement::cast_ref(&node) {
+                self.visit_html_self_closing_element(&element);
+            }
+        }
+    }
+
+    fn visit_html_element(&mut self, element: &HtmlElement) -> Option<()> {
+        // Skip script and style tags - these are not component references
+        if element.is_script_tag() || element.is_style_tag() {
+            return None;
+        }
+
+        let opening = element.opening_element().ok()?;
+        let name = opening.name().ok()?;
+
+        self.track_component_reference(&name);
+
+        Some(())
+    }
+
+    fn visit_html_self_closing_element(&mut self, element: &HtmlSelfClosingElement) -> Option<()> {
+        let name = element.name().ok()?;
+
+        self.track_component_reference(&name);
+
+        Some(())
+    }
+
+    /// Track a component name as a value reference
+    fn track_component_reference(&mut self, name: &AnyHtmlTagName) {
+        match name {
+            AnyHtmlTagName::HtmlComponentName(component) => {
+                // Track simple component: <Component>
+                if let Ok(token) = component.value_token() {
+                    self.references
+                        .insert(token.text_trimmed_range(), token.token_text_trimmed());
+                }
+            }
+            AnyHtmlTagName::HtmlMemberName(member) => {
+                // Track the base component from member expression: <Component.Member>
+                if let Ok(object) = member.object() {
+                    self.track_component_object(&object);
+                }
+            }
+            AnyHtmlTagName::HtmlTagName(_) => {
+                // Regular HTML tag, don't track
+            }
+        }
+    }
+
+    /// Track the object part of a member expression
+    fn track_component_object(&mut self, object: &AnyHtmlComponentObjectName) {
+        match object {
+            AnyHtmlComponentObjectName::HtmlTagName(tag) => {
+                // For member expressions starting with lowercase (unusual but possible)
+                if let Ok(token) = tag.value_token() {
+                    self.references
+                        .insert(token.text_trimmed_range(), token.token_text_trimmed());
+                }
+            }
+            AnyHtmlComponentObjectName::HtmlComponentName(component) => {
+                // Track the component name
+                if let Ok(token) = component.value_token() {
+                    self.references
+                        .insert(token.text_trimmed_range(), token.token_text_trimmed());
+                }
+            }
+            AnyHtmlComponentObjectName::HtmlMemberName(member) => {
+                // Nested member - track its object recursively
+                // e.g., A.B.C - track A
+                if let Ok(object) = member.object() {
+                    self.track_component_object(&object);
+                }
+            }
+        }
+    }
+
     fn visit_reference_identifier(&mut self, reference: JsReferenceIdentifier) -> Option<()> {
         let usage = AnyJsIdentifierUsage::from(reference.clone());
         if usage.is_only_type() {
@@ -84,7 +177,20 @@ mod tests {
 
     fn contains_reference(service: &EmbeddedValueReferences, reference: &str) -> bool {
         for refs in service.references.iter() {
-            if refs.values().any(|token| token.text() == reference) {
+            if refs.values().any(|token| {
+                let text = token.text();
+                // Exact match
+                if text == reference {
+                    return true;
+                }
+                // Match dotted names like "AvatarPrimitive.Fallback" against "AvatarPrimitive"
+                if let Some(base) = text.split('.').next() {
+                    if base == reference {
+                        return true;
+                    }
+                }
+                false
+            }) {
                 return true;
             }
         }
@@ -133,4 +239,24 @@ mod tests {
         assert!(contains_reference(&service, "AnotherComponent"));
         assert!(contains_reference(&service, "BarEnum"));
     }
+
+    #[test]
+    fn tracks_html_element_names() {
+        use biome_html_parser::{HtmlParseOptions, parse_html};
+
+        let source = r#"<Component /><AvatarPrimitive.Fallback />"#;
+        // Enable Vue parsing so component names are parsed correctly
+        let parsed = parse_html(source, HtmlParseOptions::default().with_vue());
+
+        println!("Diagnostics: {:?}", parsed.diagnostics());
+        println!("Has errors: {}", !parsed.diagnostics().is_empty());
+
+        let mut service = EmbeddedValueReferences::default();
+        let mut builder = service.builder();
+        builder.visit_html_root(&parsed.tree());
+        service.finish(builder);
+
+        assert!(contains_reference(&service, "Component"));
+        assert!(contains_reference(&service, "AvatarPrimitive"));
+    }
 }
diff --git a/crates/biome_service/src/workspace/server.rs b/crates/biome_service/src/workspace/server.rs
index b360cd9b3150..6ee92c088a72 100644
--- a/crates/biome_service/src/workspace/server.rs
+++ b/crates/biome_service/src/workspace/server.rs
@@ -47,6 +47,7 @@ use biome_diagnostics::{
 use biome_formatter::Printed;
 use biome_fs::{BiomePath, ConfigName, PathKind};
 use biome_grit_patterns::{CompilePatternOptions, GritQuery, compile_pattern_with_options};
+use biome_html_syntax::HtmlRoot;
 use biome_js_syntax::{AnyJsRoot, LanguageVariant, ModuleKind};
 use biome_json_parser::JsonParserOptions;
 use biome_json_syntax::JsonFileSource;
@@ -499,6 +500,22 @@ impl WorkspaceServer {
                 }
             }
         }
+
+        // Also track component element names from HTML templates (Vue/Svelte)
+        if let Some(html_file_source) = source.to_html_file_source() {
+            if html_file_source.is_vue()
+                || html_file_source.is_svelte()
+                || html_file_source.is_astro()
+            {
+                if let Some(Ok(any_parse)) = &syntax {
+                    let html_root: HtmlRoot = any_parse.tree();
+                    let mut builder = value_references.builder();
+                    builder.visit_html_root(&html_root);
+                    value_references.finish(builder);
+                }
+            }
+        }
+
         services.set_embedded_value_references(value_references);
 
         let is_indexed = if
@@ -1598,6 +1615,21 @@ impl Workspace for WorkspaceServer {
                 }
             }
         }
+
+        // Also track component element names from HTML templates (Vue/Svelte)
+        if let Some(html_file_source) = document_source.to_html_file_source() {
+            if html_file_source.is_vue()
+                || html_file_source.is_svelte()
+                || html_file_source.is_astro()
+            {
+                let html_root: HtmlRoot = parsed.any_parse.tree();
+                let mut builder = value_references.builder();
+                builder.visit_html_root(&html_root);
+                value_references.finish(builder);
+            }
+        }
+
+        dbg!(&value_references);
         services.set_embedded_value_references(value_references);
 
         let document = Document {
@@ -1719,7 +1751,7 @@ impl Workspace for WorkspaceServer {
                 plugins: plugins.clone(),
                 diagnostic_offset: None,
                 document_services: &services,
-                embedded_exported_bindings: services.embedded_bindings(),
+                snippet_services: None,
             });
 
             let LintResults {
@@ -1752,8 +1784,8 @@ impl Workspace for WorkspaceServer {
                     pull_code_actions,
                     plugins: plugins.clone(),
                     diagnostic_offset: Some(embedded_node.content_offset()),
-                    document_services: snippet_services,
-                    embedded_exported_bindings: services.embedded_bindings(),
+                    document_services: &services,
+                    snippet_services: Some(snippet_services),
                 });
 
                 diagnostics.extend(results.diagnostics);
diff --git a/xtask/codegen/html.ungram b/xtask/codegen/html.ungram
index a3501b113584..90348abd385a 100644
--- a/xtask/codegen/html.ungram
+++ b/xtask/codegen/html.ungram
@@ -109,7 +109,7 @@ HtmlTextExpression = 'html_literal'
 // <a />
 HtmlSelfClosingElement =
 	'<'
-	name: HtmlTagName
+	name: AnyHtmlTagName
 	attributes: HtmlAttributeList
 	'/'?
 	'>'
@@ -124,7 +124,7 @@ HtmlElement =
 // ^^        ^
 HtmlOpeningElement =
 	'<'
-	name: HtmlTagName
+	name: AnyHtmlTagName
 	attributes: HtmlAttributeList
 	'>'
 
@@ -132,9 +132,29 @@ HtmlOpeningElement =
 HtmlClosingElement =
 	'<'
 	'/'
-	name: HtmlTagName
+	name: AnyHtmlTagName
 	'>'
 
+AnyHtmlTagName =
+	HtmlTagName
+	| HtmlComponentName
+	| HtmlMemberName
+
+// <Component />
+// Used in Vue/Svelte/Astro files for PascalCase component names
+HtmlComponentName = value: 'html_literal'
+
+AnyHtmlComponentObjectName =
+	HtmlTagName
+	| HtmlComponentName
+	| HtmlMemberName
+
+// <Component.test>
+HtmlMemberName =
+	object: AnyHtmlComponentObjectName
+	'.'
+	member: HtmlTagName
+
 // <![CDATA[example]]>
 // Reference: https://html.spec.whatwg.org/multipage/syntax.html#cdata-sections
 HtmlCdataSection =
diff --git a/xtask/codegen/src/html_kinds_src.rs b/xtask/codegen/src/html_kinds_src.rs
index 9cfda838b619..0aa942ea6d14 100644
--- a/xtask/codegen/src/html_kinds_src.rs
+++ b/xtask/codegen/src/html_kinds_src.rs
@@ -77,6 +77,8 @@ pub const HTML_KINDS_SRC: KindsSrc = KindsSrc {
         "HTML_ATTRIBUTE_INITIALIZER_CLAUSE",
         "HTML_STRING",
         "HTML_TAG_NAME",
+        "HTML_COMPONENT_NAME",
+        "HTML_MEMBER_NAME",
         "HTML_ATTRIBUTE_NAME",
         "HTML_ELEMENT_LIST",
         "HTML_ATTRIBUTE_LIST",

From 97f5a0b8cfaefbfdc11caca9e756d25405945d5d Mon Sep 17 00:00:00 2001
From: Emanuele Stoppa <my.burning@gmail.com>
Date: Tue, 27 Jan 2026 11:34:34 +0000
Subject: [PATCH 2/6] clippy and more tests

---
 .../tests/cases/handle_astro_files.rs         | 50 +++++++++++++++++++
 .../tests/cases/handle_svelte_files.rs        | 50 +++++++++++++++++++
 .../biome_cli/tests/cases/handle_vue_files.rs |  9 +---
 ...not_triggered_for_enum_in_template_v2.snap | 41 +++++++++++++++
 ...not_triggered_for_enum_in_template_v2.snap | 41 +++++++++++++++
 crates/biome_html_analyze/src/a11y.rs         |  2 +-
 .../src/html/auxiliary/opening_element.rs     |  3 +-
 .../html/auxiliary/self_closing_element.rs    |  3 +-
 crates/biome_html_syntax/src/element_ext.rs   | 27 ++--------
 crates/biome_html_syntax/src/file_source.rs   |  4 ++
 .../services/embedded_value_references.rs     | 12 +----
 crates/biome_service/src/workspace/server.rs  | 38 ++++++--------
 12 files changed, 211 insertions(+), 69 deletions(-)
 create mode 100644 crates/biome_cli/tests/snapshots/main_cases_handle_astro_files/use_import_type_not_triggered_for_enum_in_template_v2.snap
 create mode 100644 crates/biome_cli/tests/snapshots/main_cases_handle_svelte_files/use_import_type_not_triggered_for_enum_in_template_v2.snap

diff --git a/crates/biome_cli/tests/cases/handle_astro_files.rs b/crates/biome_cli/tests/cases/handle_astro_files.rs
index 60f773b5df0e..1064e1577f64 100644
--- a/crates/biome_cli/tests/cases/handle_astro_files.rs
+++ b/crates/biome_cli/tests/cases/handle_astro_files.rs
@@ -913,3 +913,53 @@ fn use_import_type_not_triggered_for_enum_in_template() {
         result,
     ));
 }
+
+#[test]
+fn use_import_type_not_triggered_for_enum_in_template_v2() {
+    let fs = MemoryFileSystem::default();
+    let mut console = BufferConsole::default();
+
+    fs.insert(
+        "biome.json".into(),
+        r#"{ "html": { "linter": {"enabled": true}, "experimentalFullSupportEnabled": true } }"#
+            .as_bytes(),
+    );
+
+    let file = Utf8Path::new("file.astro");
+    fs.insert(
+        file.into(),
+        r#"---
+import { Avatar as AvatarPrimitive } from "bits-ui";
+import { cn } from "$lib/utils.js";
+
+let {
+	ref = $bindable(null),
+	class: className,
+}: AvatarPrimitive.FallbackProps = $props();
+---
+
+<!-- used as value here -->
+<AvatarPrimitive.Fallback
+	bind:ref
+	class="something nice"
+/>
+"#
+        .as_bytes(),
+    );
+
+    let (fs, result) = run_cli(
+        fs,
+        &mut console,
+        Args::from(["lint", "--only=useImportType", file.as_str()].as_slice()),
+    );
+
+    assert!(result.is_ok(), "run_cli returned {result:?}");
+
+    assert_cli_snapshot(SnapshotPayload::new(
+        module_path!(),
+        "use_import_type_not_triggered_for_enum_in_template_v2",
+        fs,
+        console,
+        result,
+    ));
+}
diff --git a/crates/biome_cli/tests/cases/handle_svelte_files.rs b/crates/biome_cli/tests/cases/handle_svelte_files.rs
index 1d6f0bf37aa8..fd31ae5e23c5 100644
--- a/crates/biome_cli/tests/cases/handle_svelte_files.rs
+++ b/crates/biome_cli/tests/cases/handle_svelte_files.rs
@@ -705,3 +705,53 @@ fn use_import_type_not_triggered_for_enum_in_template() {
         result,
     ));
 }
+
+#[test]
+fn use_import_type_not_triggered_for_enum_in_template_v2() {
+    let fs = MemoryFileSystem::default();
+    let mut console = BufferConsole::default();
+
+    fs.insert(
+        "biome.json".into(),
+        r#"{ "html": { "linter": {"enabled": true}, "experimentalFullSupportEnabled": true } }"#
+            .as_bytes(),
+    );
+
+    let file = Utf8Path::new("file.svelte");
+    fs.insert(
+        file.into(),
+        r#"<script lang="ts">
+import { Avatar as AvatarPrimitive } from "bits-ui"; // <-- false positive
+import { cn } from "$lib/utils.js";
+
+let {
+	ref = $bindable(null),
+	class: className,
+}: AvatarPrimitive.FallbackProps = $props();
+</script>
+
+<!-- used as value here -->
+<AvatarPrimitive.Fallback
+	bind:ref
+	class="something nice"
+/>
+"#
+        .as_bytes(),
+    );
+
+    let (fs, result) = run_cli(
+        fs,
+        &mut console,
+        Args::from(["lint", "--only=useImportType", file.as_str()].as_slice()),
+    );
+
+    assert!(result.is_ok(), "run_cli returned {result:?}");
+
+    assert_cli_snapshot(SnapshotPayload::new(
+        module_path!(),
+        "use_import_type_not_triggered_for_enum_in_template_v2",
+        fs,
+        console,
+        result,
+    ));
+}
diff --git a/crates/biome_cli/tests/cases/handle_vue_files.rs b/crates/biome_cli/tests/cases/handle_vue_files.rs
index a7ad9b46e886..881bc9694aca 100644
--- a/crates/biome_cli/tests/cases/handle_vue_files.rs
+++ b/crates/biome_cli/tests/cases/handle_vue_files.rs
@@ -1181,14 +1181,6 @@ import { Component, FooEnum } from './types';
     ));
 }
 
-const VUE_ENUM_IN_TEMPLATE: &str = r#"<script setup lang="ts">
-import { Component, FooEnum } from './types';
-</script>
-<template>
-  <Component />
-  <div>{{ FooEnum.Foo }}</div>
-</template>"#;
-
 #[test]
 fn use_import_type_not_triggered_for_enum_in_template_v2() {
     let fs = MemoryFileSystem::default();
@@ -1227,6 +1219,7 @@ let {
         &mut console,
         Args::from(["lint", "--only=useImportType", file.as_str()].as_slice()),
     );
+    assert!(result.is_ok(), "run_cli returned {result:?}");
 
     assert_cli_snapshot(SnapshotPayload::new(
         module_path!(),
diff --git a/crates/biome_cli/tests/snapshots/main_cases_handle_astro_files/use_import_type_not_triggered_for_enum_in_template_v2.snap b/crates/biome_cli/tests/snapshots/main_cases_handle_astro_files/use_import_type_not_triggered_for_enum_in_template_v2.snap
new file mode 100644
index 000000000000..fad449ed7772
--- /dev/null
+++ b/crates/biome_cli/tests/snapshots/main_cases_handle_astro_files/use_import_type_not_triggered_for_enum_in_template_v2.snap
@@ -0,0 +1,41 @@
+---
+source: crates/biome_cli/tests/snap_test.rs
+expression: redactor(content)
+---
+## `biome.json`
+
+```json
+{
+  "html": {
+    "linter": { "enabled": true },
+    "experimentalFullSupportEnabled": true
+  }
+}
+```
+
+## `file.astro`
+
+```astro
+---
+import { Avatar as AvatarPrimitive } from "bits-ui";
+import { cn } from "$lib/utils.js";
+
+let {
+	ref = $bindable(null),
+	class: className,
+}: AvatarPrimitive.FallbackProps = $props();
+---
+
+<!-- used as value here -->
+<AvatarPrimitive.Fallback
+	bind:ref
+	class="something nice"
+/>
+
+```
+
+# Emitted Messages
+
+```block
+Checked 1 file in <TIME>. No fixes applied.
+```
diff --git a/crates/biome_cli/tests/snapshots/main_cases_handle_svelte_files/use_import_type_not_triggered_for_enum_in_template_v2.snap b/crates/biome_cli/tests/snapshots/main_cases_handle_svelte_files/use_import_type_not_triggered_for_enum_in_template_v2.snap
new file mode 100644
index 000000000000..b118c13663ae
--- /dev/null
+++ b/crates/biome_cli/tests/snapshots/main_cases_handle_svelte_files/use_import_type_not_triggered_for_enum_in_template_v2.snap
@@ -0,0 +1,41 @@
+---
+source: crates/biome_cli/tests/snap_test.rs
+expression: redactor(content)
+---
+## `biome.json`
+
+```json
+{
+  "html": {
+    "linter": { "enabled": true },
+    "experimentalFullSupportEnabled": true
+  }
+}
+```
+
+## `file.svelte`
+
+```svelte
+<script lang="ts">
+import { Avatar as AvatarPrimitive } from "bits-ui"; // <-- false positive
+import { cn } from "$lib/utils.js";
+
+let {
+	ref = $bindable(null),
+	class: className,
+}: AvatarPrimitive.FallbackProps = $props();
+</script>
+
+<!-- used as value here -->
+<AvatarPrimitive.Fallback
+	bind:ref
+	class="something nice"
+/>
+
+```
+
+# Emitted Messages
+
+```block
+Checked 1 file in <TIME>. No fixes applied.
+```
diff --git a/crates/biome_html_analyze/src/a11y.rs b/crates/biome_html_analyze/src/a11y.rs
index eda027acc8c3..615e959dd29b 100644
--- a/crates/biome_html_analyze/src/a11y.rs
+++ b/crates/biome_html_analyze/src/a11y.rs
@@ -77,7 +77,7 @@ pub(crate) fn is_hidden_from_screen_reader(element: &AnyHtmlTagElement) -> bool
         return true;
     }
 
-    match element.name_value_token().ok() {
+    match element.name_value_token() {
         Some(name) if name.text_trimmed() == "input" => element
             .find_attribute_by_name("type")
             .is_some_and(|attr| attribute_value_equals_ignore_case(&attr, "hidden")),
diff --git a/crates/biome_html_formatter/src/html/auxiliary/opening_element.rs b/crates/biome_html_formatter/src/html/auxiliary/opening_element.rs
index 32cef90f2047..dc1cf2e48fa4 100644
--- a/crates/biome_html_formatter/src/html/auxiliary/opening_element.rs
+++ b/crates/biome_html_formatter/src/html/auxiliary/opening_element.rs
@@ -61,8 +61,7 @@ impl FormatNodeRule<HtmlOpeningElement> for FormatHtmlOpeningElement {
         let is_whitespace_sensitive = css_display.is_internally_whitespace_sensitive(f);
         let is_canonical_html_element = name
             .as_html_tag_name()
-            .map(|name| should_lowercase_html_tag(f, &name))
-            .unwrap_or_default();
+            .is_some_and(|name| should_lowercase_html_tag(f, name));
 
         let bracket_same_line = f.options().bracket_same_line().value();
 
diff --git a/crates/biome_html_formatter/src/html/auxiliary/self_closing_element.rs b/crates/biome_html_formatter/src/html/auxiliary/self_closing_element.rs
index ea4a13163801..f3be355dd337 100644
--- a/crates/biome_html_formatter/src/html/auxiliary/self_closing_element.rs
+++ b/crates/biome_html_formatter/src/html/auxiliary/self_closing_element.rs
@@ -20,8 +20,7 @@ impl FormatNodeRule<HtmlSelfClosingElement> for FormatHtmlSelfClosingElement {
         let name = name?;
         let is_canonical_html_element = name
             .as_html_tag_name()
-            .map(|name| should_lowercase_html_tag(f, &name))
-            .unwrap_or_default();
+            .is_some_and(|name| should_lowercase_html_tag(f, name));
 
         write!(f, [l_angle_token.format(), name.format()])?;
 
diff --git a/crates/biome_html_syntax/src/element_ext.rs b/crates/biome_html_syntax/src/element_ext.rs
index 8a40d50f39bb..9522d6526d1f 100644
--- a/crates/biome_html_syntax/src/element_ext.rs
+++ b/crates/biome_html_syntax/src/element_ext.rs
@@ -342,29 +342,12 @@ impl AnyHtmlTagElement {
         }
     }
 
-    pub fn name_value_token(&self) -> SyntaxResult<HtmlSyntaxToken> {
-        let name = self.name()?;
+    pub fn name_value_token(&self) -> Option<HtmlSyntaxToken> {
+        let name = self.name().ok()?;
         match name {
-            AnyHtmlTagName::HtmlTagName(tag) => tag.value_token(),
-            AnyHtmlTagName::HtmlComponentName(component) => component.value_token(),
-            AnyHtmlTagName::HtmlMemberName(member) => {
-                // For member names, return the first token (the base component name)
-                match member.object()? {
-                    crate::AnyHtmlComponentObjectName::HtmlTagName(tag) => tag.value_token(),
-                    crate::AnyHtmlComponentObjectName::HtmlComponentName(component) => {
-                        component.value_token()
-                    }
-                    crate::AnyHtmlComponentObjectName::HtmlMemberName(_) => {
-                        // For deeply nested members, we'd need to recurse
-                        // For now, use syntax to get the first token
-                        use biome_rowan::AstNode;
-                        member
-                            .syntax()
-                            .first_token()
-                            .ok_or_else(|| biome_rowan::SyntaxError::MissingRequiredChild)
-                    }
-                }
-            }
+            AnyHtmlTagName::HtmlTagName(tag) => tag.value_token().ok(),
+            AnyHtmlTagName::HtmlComponentName(_) => None,
+            AnyHtmlTagName::HtmlMemberName(_) => None,
         }
     }
 
diff --git a/crates/biome_html_syntax/src/file_source.rs b/crates/biome_html_syntax/src/file_source.rs
index 2328c417f8d4..530dd49425ce 100644
--- a/crates/biome_html_syntax/src/file_source.rs
+++ b/crates/biome_html_syntax/src/file_source.rs
@@ -64,6 +64,10 @@ impl HtmlFileSource {
         matches!(self.variant, HtmlVariant::Astro)
     }
 
+    pub const fn supports_components(&self) -> bool {
+        self.is_vue() || self.is_svelte() || self.is_astro()
+    }
+
     pub fn variant(&self) -> &HtmlVariant {
         &self.variant
     }
diff --git a/crates/biome_service/src/workspace/document/services/embedded_value_references.rs b/crates/biome_service/src/workspace/document/services/embedded_value_references.rs
index b1525964e1e4..4cfc1db1c5ad 100644
--- a/crates/biome_service/src/workspace/document/services/embedded_value_references.rs
+++ b/crates/biome_service/src/workspace/document/services/embedded_value_references.rs
@@ -179,17 +179,7 @@ mod tests {
         for refs in service.references.iter() {
             if refs.values().any(|token| {
                 let text = token.text();
-                // Exact match
-                if text == reference {
-                    return true;
-                }
-                // Match dotted names like "AvatarPrimitive.Fallback" against "AvatarPrimitive"
-                if let Some(base) = text.split('.').next() {
-                    if base == reference {
-                        return true;
-                    }
-                }
-                false
+                text == reference
             }) {
                 return true;
             }
diff --git a/crates/biome_service/src/workspace/server.rs b/crates/biome_service/src/workspace/server.rs
index 6ee92c088a72..178f2fe6891d 100644
--- a/crates/biome_service/src/workspace/server.rs
+++ b/crates/biome_service/src/workspace/server.rs
@@ -502,18 +502,14 @@ impl WorkspaceServer {
         }
 
         // Also track component element names from HTML templates (Vue/Svelte)
-        if let Some(html_file_source) = source.to_html_file_source() {
-            if html_file_source.is_vue()
-                || html_file_source.is_svelte()
-                || html_file_source.is_astro()
-            {
-                if let Some(Ok(any_parse)) = &syntax {
-                    let html_root: HtmlRoot = any_parse.tree();
-                    let mut builder = value_references.builder();
-                    builder.visit_html_root(&html_root);
-                    value_references.finish(builder);
-                }
-            }
+        if let Some(html_file_source) = source.to_html_file_source()
+            && html_file_source.supports_components()
+            && let Some(Ok(any_parse)) = &syntax
+        {
+            let html_root: HtmlRoot = any_parse.tree();
+            let mut builder = value_references.builder();
+            builder.visit_html_root(&html_root);
+            value_references.finish(builder);
         }
 
         services.set_embedded_value_references(value_references);
@@ -1617,19 +1613,15 @@ impl Workspace for WorkspaceServer {
         }
 
         // Also track component element names from HTML templates (Vue/Svelte)
-        if let Some(html_file_source) = document_source.to_html_file_source() {
-            if html_file_source.is_vue()
-                || html_file_source.is_svelte()
-                || html_file_source.is_astro()
-            {
-                let html_root: HtmlRoot = parsed.any_parse.tree();
-                let mut builder = value_references.builder();
-                builder.visit_html_root(&html_root);
-                value_references.finish(builder);
-            }
+        if let Some(html_file_source) = document_source.to_html_file_source()
+            && html_file_source.supports_components()
+        {
+            let html_root: HtmlRoot = parsed.any_parse.tree();
+            let mut builder = value_references.builder();
+            builder.visit_html_root(&html_root);
+            value_references.finish(builder);
         }
 
-        dbg!(&value_references);
         services.set_embedded_value_references(value_references);
 
         let document = Document {

From ff4467802f7814f09053eb97cab7dcfc566303df Mon Sep 17 00:00:00 2001
From: Emanuele Stoppa <my.burning@gmail.com>
Date: Tue, 27 Jan 2026 14:29:32 +0000
Subject: [PATCH 3/6] address feedback

---
 .../src/lint/nursery/no_sync_scripts.rs       |  9 +++--
 crates/biome_html_syntax/src/element_ext.rs   | 35 +++++--------------
 2 files changed, 16 insertions(+), 28 deletions(-)

diff --git a/crates/biome_html_analyze/src/lint/nursery/no_sync_scripts.rs b/crates/biome_html_analyze/src/lint/nursery/no_sync_scripts.rs
index 339ee42b7467..65d5b99d460e 100644
--- a/crates/biome_html_analyze/src/lint/nursery/no_sync_scripts.rs
+++ b/crates/biome_html_analyze/src/lint/nursery/no_sync_scripts.rs
@@ -2,7 +2,7 @@ use biome_analyze::{
     Ast, Rule, RuleDiagnostic, RuleSource, context::RuleContext, declare_lint_rule,
 };
 use biome_console::markup;
-use biome_html_syntax::HtmlOpeningElement;
+use biome_html_syntax::{HtmlFileSource, HtmlOpeningElement};
 use biome_rowan::AstNode;
 use biome_rule_options::no_sync_scripts::NoSyncScriptsOptions;
 
@@ -44,10 +44,15 @@ impl Rule for NoSyncScripts {
 
     fn run(ctx: &RuleContext<Self>) -> Option<Self::State> {
         let binding = ctx.query();
+        let file_source = ctx.source_type::<HtmlFileSource>();
 
         let name = binding.name().ok()?;
         let name_text = name.token_text_trimmed()?;
-        if name_text != "script" {
+
+        if file_source.is_html() && !name_text.eq_ignore_ascii_case("script") {
+            return None;
+        }
+        if !file_source.is_html() && name_text != "script" {
             return None;
         }
 
diff --git a/crates/biome_html_syntax/src/element_ext.rs b/crates/biome_html_syntax/src/element_ext.rs
index 9522d6526d1f..15cd25526fcc 100644
--- a/crates/biome_html_syntax/src/element_ext.rs
+++ b/crates/biome_html_syntax/src/element_ext.rs
@@ -13,34 +13,17 @@ const VOID_ELEMENTS: &[&str] = &[
 ];
 
 /// Helper to get the text value from any tag name variant
-fn get_tag_name_text(name: &AnyHtmlTagName) -> SyntaxResult<TokenText> {
+fn get_tag_name_text(name: &AnyHtmlTagName) -> Option<TokenText> {
     match name {
         AnyHtmlTagName::HtmlTagName(tag) => {
-            let token = tag.value_token()?;
-            Ok(token.token_text_trimmed())
+            let token = tag.value_token().ok()?;
+            Some(token.token_text_trimmed())
         }
         AnyHtmlTagName::HtmlComponentName(component) => {
-            let token = component.value_token()?;
-            Ok(token.token_text_trimmed())
-        }
-        AnyHtmlTagName::HtmlMemberName(member) => {
-            // For member names like Component.Member, we need to get the object part
-            // (the base component name) since that's what we want to track
-            match member.object()? {
-                crate::AnyHtmlComponentObjectName::HtmlTagName(tag) => {
-                    let token = tag.value_token()?;
-                    Ok(token.token_text_trimmed())
-                }
-                crate::AnyHtmlComponentObjectName::HtmlComponentName(component) => {
-                    let token = component.value_token()?;
-                    Ok(token.token_text_trimmed())
-                }
-                crate::AnyHtmlComponentObjectName::HtmlMemberName(nested_member) => {
-                    // Recursively get the base name from nested members
-                    get_tag_name_text(&AnyHtmlTagName::HtmlMemberName(nested_member))
-                }
-            }
+            let token = component.value_token().ok()?;
+            Some(token.token_text_trimmed())
         }
+        AnyHtmlTagName::HtmlMemberName(_) => None,
     }
 }
 
@@ -232,7 +215,7 @@ impl HtmlElement {
             return false;
         };
 
-        let Ok(name_text) = get_tag_name_text(&name) else {
+        let Some(name_text) = name.token_text_trimmed() else {
             return false;
         };
 
@@ -244,7 +227,7 @@ impl HtmlElement {
             return false;
         };
 
-        let Ok(name_text) = get_tag_name_text(&name) else {
+        let Some(name_text) = name.token_text_trimmed() else {
             return false;
         };
 
@@ -319,7 +302,7 @@ impl AnyHtmlTagName {
     /// Returns the trimmed token text of the tag name.
     /// For member names like Component.Member, returns the full member expression text.
     pub fn token_text_trimmed(&self) -> Option<TokenText> {
-        get_tag_name_text(self).ok()
+        get_tag_name_text(self)
     }
 }
 

From f60ef66e83ce49df23bfcad5638021bd3c4c682f Mon Sep 17 00:00:00 2001
From: Emanuele Stoppa <my.burning@gmail.com>
Date: Tue, 27 Jan 2026 14:49:51 +0000
Subject: [PATCH 4/6] fix fix fix

---
 .../src/html/auxiliary/self_closing_element.rs         |  4 +++-
 crates/biome_html_syntax/src/element_ext.rs            | 10 +++++-----
 2 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/crates/biome_html_formatter/src/html/auxiliary/self_closing_element.rs b/crates/biome_html_formatter/src/html/auxiliary/self_closing_element.rs
index f3be355dd337..74e99fb9c9ac 100644
--- a/crates/biome_html_formatter/src/html/auxiliary/self_closing_element.rs
+++ b/crates/biome_html_formatter/src/html/auxiliary/self_closing_element.rs
@@ -64,7 +64,9 @@ impl FormatNodeRule<HtmlSelfClosingElement> for FormatHtmlSelfClosingElement {
                     }
                 }
                 // We remove the slash only from void elements
-                else if node.is_void_element()? && self_close_void_elements.is_never() {
+                else if node.is_void_element().unwrap_or_default()
+                    && self_close_void_elements.is_never()
+                {
                     if let Some(slash_token) = &slash_token {
                         write!(f, [format_removed(slash_token)])?;
                     }
diff --git a/crates/biome_html_syntax/src/element_ext.rs b/crates/biome_html_syntax/src/element_ext.rs
index 15cd25526fcc..fab11ada6e19 100644
--- a/crates/biome_html_syntax/src/element_ext.rs
+++ b/crates/biome_html_syntax/src/element_ext.rs
@@ -31,10 +31,10 @@ impl HtmlSelfClosingElement {
     /// Whether the current self-closing element is a void element.
     ///
     /// <https://html.spec.whatwg.org/#void-elements>
-    pub fn is_void_element(&self) -> SyntaxResult<bool> {
-        let name = self.name()?;
+    pub fn is_void_element(&self) -> Option<bool> {
+        let name = self.name().ok()?;
         let name_text = get_tag_name_text(&name)?;
-        Ok(VOID_ELEMENTS.binary_search(&&*name_text).is_ok())
+        Some(VOID_ELEMENTS.binary_search(&&*name_text).is_ok())
     }
 }
 
@@ -116,7 +116,7 @@ impl HtmlSelfClosingElement {
     /// Returns the tag name of the element (trimmed), if it has one.
     pub fn tag_name(&self) -> Option<TokenText> {
         let name = self.name().ok()?;
-        get_tag_name_text(&name).ok()
+        get_tag_name_text(&name)
     }
 
     pub fn find_attribute_by_name(&self, name_to_lookup: &str) -> Option<HtmlAttribute> {
@@ -140,7 +140,7 @@ impl HtmlOpeningElement {
     /// Returns the tag name of the element (trimmed), if it has one.
     pub fn tag_name(&self) -> Option<TokenText> {
         let name = self.name().ok()?;
-        get_tag_name_text(&name).ok()
+        get_tag_name_text(&name)
     }
 
     pub fn find_attribute_by_name(&self, name_to_lookup: &str) -> Option<HtmlAttribute> {

From 941d9523a7420531d13e116c30e16e82a34b0518 Mon Sep 17 00:00:00 2001
From: Emanuele Stoppa <my.burning@gmail.com>
Date: Tue, 27 Jan 2026 15:10:01 +0000
Subject: [PATCH 5/6] feddback

---
 crates/biome_html_parser/src/syntax/mod.rs | 9 ++-------
 1 file changed, 2 insertions(+), 7 deletions(-)

diff --git a/crates/biome_html_parser/src/syntax/mod.rs b/crates/biome_html_parser/src/syntax/mod.rs
index ee2b701cfb9c..03b64e9b4b09 100644
--- a/crates/biome_html_parser/src/syntax/mod.rs
+++ b/crates/biome_html_parser/src/syntax/mod.rs
@@ -4,7 +4,7 @@ mod svelte;
 mod vue;
 
 use crate::parser::HtmlParser;
-use crate::syntax::HtmlSyntaxFeatures::{DoubleTextExpressions, SingleTextExpressions};
+use crate::syntax::HtmlSyntaxFeatures::{Astro, DoubleTextExpressions, SingleTextExpressions, Vue};
 use crate::syntax::astro::parse_astro_fence;
 use crate::syntax::parse_error::*;
 use crate::syntax::svelte::{
@@ -149,18 +149,13 @@ fn is_possible_component(p: &HtmlParser, tag_name: &str) -> bool {
         && !p.options().is_html()
 }
 
-/// Returns true if the current file supports component syntax (Vue/Svelte/Astro)
-fn supports_components(p: &HtmlParser) -> bool {
-    !p.options().is_html()
-}
-
 /// Returns the lexer context to use when parsing component names and member expressions.
 /// This allows `.` to be lexed as a token for member expressions like Component.Member
 /// We reuse InsideTagVue context because it supports `.` lexing, but this is ONLY used
 /// for parsing component names, not for parsing attributes.
 #[inline(always)]
 fn component_name_context(p: &HtmlParser) -> HtmlLexContext {
-    if supports_components(p) {
+    if Vue.is_supported(p) || Astro.is_supported(p) || SingleTextExpressions.is_supported(p) {
         // Use InsideTagVue for all component-supporting files when parsing component names
         // This allows `.` to be lexed properly for member expressions
         // Note: This is safe because we only use this context for tag names, not attributes

From 697bc09d61d382becf6d8bca2a48d5b0b4f07331 Mon Sep 17 00:00:00 2001
From: Emanuele Stoppa <my.burning@gmail.com>
Date: Tue, 27 Jan 2026 16:51:16 +0000
Subject: [PATCH 6/6] feedback

---
 .../biome_html_formatter/tests/quick_test.rs  | 24 ++++++-------------
 crates/biome_html_parser/tests/quick_test.rs  | 20 ++++------------
 2 files changed, 11 insertions(+), 33 deletions(-)

diff --git a/crates/biome_html_formatter/tests/quick_test.rs b/crates/biome_html_formatter/tests/quick_test.rs
index 4de06eddb359..47bafee9dcd8 100644
--- a/crates/biome_html_formatter/tests/quick_test.rs
+++ b/crates/biome_html_formatter/tests/quick_test.rs
@@ -20,26 +20,16 @@ fn quick_test() {
     // quick brown fox
     // "#;
     let src = r#"
-<script type="text/x-template" id="header-view-template">
-      <div class="draggable-header-view"
-        @mousedown="startDrag" @touchstart="startDrag"
-        @mousemove="onDrag" @touchmove="onDrag"
-        @mouseup="stopDrag" @touchend="stopDrag" @mouseleave="stopDrag">
-        <svg class="bg" width="320" height="560">
-          <path :d="headerPath" fill="3F51B5"></path>
-        </svg>
-        <div class="header">
-          <slot name="header"></slot>
-        </div>
-        <div class="content" :style="contentPosition">
-          <slot name="content"></slot>
-        </div>
-      </div>
-    </script>
+{#snippet ff.call()}
+    {page.value}
+    {second.value}
+    <div>
+        <span></span>
+    </div>
+{/snippet}
 "#;
     let source_type = HtmlFileSource::html();
     let tree = parse_html(src, HtmlParseOptions::from(&source_type));
-    dbg!(&tree);
     let options = HtmlFormatOptions::new(source_type)
         .with_indent_style(IndentStyle::Space)
         .with_line_width(LineWidth::try_from(80).unwrap())
diff --git a/crates/biome_html_parser/tests/quick_test.rs b/crates/biome_html_parser/tests/quick_test.rs
index 2daec32ced79..3c74e90185a0 100644
--- a/crates/biome_html_parser/tests/quick_test.rs
+++ b/crates/biome_html_parser/tests/quick_test.rs
@@ -5,22 +5,10 @@ use biome_test_utils::has_bogus_nodes_or_empty_slots;
 #[ignore]
 #[test]
 pub fn quick_test() {
-    let code = r#"    <script type="text/x-template" id="header-view-template">
-      <div class="draggable-header-view"
-        @mousedown="startDrag" @touchstart="startDrag"
-        @mousemove="onDrag" @touchmove="onDrag"
-        @mouseup="stopDrag" @touchend="stopDrag" @mouseleave="stopDrag">
-        <svg class="bg" width="320" height="560">
-          <path :d="headerPath" fill="3F51B5"></path>
-        </svg>
-        <div class="header">
-          <slot name="header"></slot>
-        </div>
-        <div class="content" :style="contentPosition">
-          <slot name="content"></slot>
-        </div>
-      </div>
-    </script>
+    let code = r#"<p style:width style:height>Multiple shorthand</p>
+
+
+<Base title="500"></Base>
 "#;
 
     let source_type = HtmlFileSource::svelte();