{"record":{"id":"ef9e87fdf06756ef","repo":"oxc-project/oxc","slug":"name-name-is-reserved-in-html","errorCode":null,"errorMessage":"Name \"{name}\" is reserved in HTML.","messagePattern":"Name \"(.+?)\" is reserved in HTML\\.","errorType":"validation","errorClass":"OxcDiagnostic","httpStatus":null,"severity":"warning","filePath":"crates/oxc_linter/src/rules/vue/no_reserved_component_names.rs","lineNumber":29,"sourceCode":"\nuse crate::{\n    AstNode,\n    context::LintContext,\n    rule::{DefaultRuleConfig, Rule},\n    utils::{\n        VUE_RESERVED_DEPRECATED_HTML_ELEMENTS, VUE_RESERVED_HTML_ELEMENTS,\n        VUE_RESERVED_KEBAB_CASE_ELEMENTS, VUE_RESERVED_SVG_ELEMENTS, VUE2_BUILTIN_COMPONENT_NAMES,\n        VUE3_BUILTIN_COMPONENT_NAMES_EXTRA, find_property,\n        is_vue_component_options_object_excluding_instance,\n    },\n};\n\nfn reserved_diagnostic(name: &str, span: Span) -> OxcDiagnostic {\n    OxcDiagnostic::warn(format!(\"Name \\\"{name}\\\" is reserved.\")).with_label(span)\n}\n\nfn reserved_in_html_diagnostic(name: &str, span: Span) -> OxcDiagnostic {\n    OxcDiagnostic::warn(format!(\"Name \\\"{name}\\\" is reserved in HTML.\")).with_label(span)\n}\n\nfn reserved_in_vue_diagnostic(name: &str, span: Span) -> OxcDiagnostic {\n    OxcDiagnostic::warn(format!(\"Name \\\"{name}\\\" is reserved in Vue.js.\")).with_label(span)\n}\n\nfn reserved_in_vue3_diagnostic(name: &str, span: Span) -> OxcDiagnostic {\n    OxcDiagnostic::warn(format!(\"Name \\\"{name}\\\" is reserved in Vue.js 3.x.\")).with_label(span)\n}\n\n#[derive(Debug, Default, Clone, JsonSchema, Deserialize)]\n#[serde(rename_all = \"camelCase\", default, deny_unknown_fields)]\npub struct NoReservedComponentNames {\n    /// Disallow Vue 2 built-in component names (e.g. `Transition`, `KeepAlive`).\n    disallow_vue_built_in_components: bool,\n    /// Disallow Vue 3 built-in component names (e.g. `Teleport`, `Suspense`).\n    /// Note: this also catches Vue 2 built-ins because Vue 3's set includes them.\n    disallow_vue3_built_in_components: bool,","sourceCodeStart":11,"sourceCodeEnd":47,"githubUrl":"https://github.com/oxc-project/oxc/blob/e1e7af627c8843ab64044ed466b128fcc21a035b/crates/oxc_linter/src/rules/vue/no_reserved_component_names.rs#L11-L47","documentation":"The reserved-in-HTML variant of vue/no-reserved-component-names: 'Name \"{name}\" is reserved in HTML.' A component named after an HTML element (from VUE_RESERVED_HTML_ELEMENTS, and VUE_RESERVED_SVG_ELEMENTS for SVG tags) shadows that element in in-DOM templates and can be parsed as the native tag instead of your component. By default the match is case-insensitive-ish for capitalized forms (config flag controls case-sensitive matching of HTML/SVG names).","triggerScenarios":"Naming a component `Div`, `Header`, `Menu`, `Svg`, `Circle`, etc. — anything in the HTML/SVG reserved lists — via the `name` option or the file/registration name, with the rule's case-sensitivity option left at its default (capitalized forms also reported).","commonSituations":"Wrapper components named `Header` or `Footer` that render those tags; SVG icon components named after SVG elements (`Circle`, `Path`); in-DOM templates (HTML parsed by the browser) where such names resolve to native elements.","solutions":["Rename the component to a non-reserved name (e.g. `PageHeader`, `IconCircle`).","If you only need the exact tag inside the template, keep the native element and style it instead of shadowing it with a component.","Set the rule's case-sensitivity option deliberately if you accept capitalized collisions in SFC-only templates — but renaming is safer.","Re-run oxlint to confirm."],"exampleFix":"// before\nexport default {\n  name: 'Header' // reserved in HTML\n}\n\n// after\nexport default {\n  name: 'PageHeader'\n}","handlingStrategy":"validation","validationCode":null,"typeGuard":null,"tryCatchPattern":null,"preventionTips":["Avoid naming components after HTML/SVG elements, including capitalized forms like `Header` or `Circle`.","Prefer compound names (PageHeader, IconCircle) for wrappers.","If you author in-DOM templates, treat this as a hard requirement — the browser parser resolves native tags first."],"tags":["vue","naming","lint","html","reserved-names"],"backgroundTag":"reserved-name-collision","analyzedSha":"e1e7af627c8843ab64044ed466b128fcc21a035b","analyzedAt":"2026-08-20T07:01:07.079Z","contentChangedAt":"2026-08-20T07:01:07.079Z","schemaVersion":2},"datasetVersion":"2026-09-14T00:17:10.932Z"}