Angular中能否用同名自定义组件覆盖已有的HTML组件？

首先明确：HTML规范不允许注册和原生保留标签同名的自定义元素（自定义元素名必须包含短横线），直接修改HTMLButtonElement原型注入逻辑会污染全局原生能力，极易引发第三方组件异常、原生表单行为错乱，不推荐使用。
以下是无侵入、不需要修改任何现有button标签的实现方案：

• Angular 场景 #

  直接修改原有自定义指令的选择器，框架会自动将指令逻辑应用到所有原生button元素，不需要在标签上手动添加指令属性：

  @Directive({
    // 原选择器为'[myOwnDirective]'，修改为直接匹配button标签
    selector: 'button'
  })
  export class MyOwnDirective {
    constructor(private el: ElementRef) {
      // 保留原有指令的全部逻辑即可，所有原生button自动生效
    }
  }
  

• Vue/React 等框架场景 #

  不需要逐个给button加指令标记，在应用根节点绑定一个全局指令，遍历根节点下所有button（包含后续动态渲染生成的按钮）注入原有指令逻辑即可，以Vue3为例：

  // 项目入口main.js
  const runDirectiveLogic = (el) => {
    if (el.__directiveBound) return // 防重复绑定
    el.__directiveBound = true
    // 此处写入原my-own-directive的全部逻辑，比如事件绑定、防抖、埋点、权限校验等
  }
  
  app.directive('autoBindBtn', {
    mounted(el) {
      // 初始化处理现有按钮
      el.querySelectorAll('button').forEach(runDirectiveLogic)
      // 监听DOM变化，处理后续动态渲染的按钮
      const observer = new MutationObserver((mutations) => {
        mutations.forEach(mut => {
          mut.addedNodes.forEach(node => {
            if (node.nodeType !== 1) return
            if (node.tagName.toLowerCase() === 'button') runDirectiveLogic(node)
            node.querySelectorAll?.('button').forEach(runDirectiveLogic)
          })
        })
      })
      observer.observe(el, { childList: true, subtree: true })
      el._btnObserver = observer
    },
    unmounted(el) {
      el._btnObserver?.disconnect()
    }
  })
  
  // 根组件挂载时绑定到最外层容器，无需修改任何业务页面代码
  app.mount('#app', {
    template: `<div v-autoBindBtn><router-view /></div>`
  })
  

• 无框架依赖通用方案 #

  无论使用什么技术栈，都可以在项目入口最顶部执行以下逻辑，直接给所有button自动注入目标逻辑，效果和全局绑定指令完全一致：

  // 放在入口文件最顶部，保证最早执行
  const applyDirective = (el) => {
    if (el.__myDirectiveApplied) return
    el.__myDirectiveApplied = true
    // 写入原自定义指令的全部逻辑
  }
  
  // 处理初始加载存在的按钮
  document.querySelectorAll('button').forEach(applyDirective)
  
  // 监听DOM变更，处理后续动态生成的按钮
  const observer = new MutationObserver((mutations) => {
    mutations.forEach(mut => {
      mut.addedNodes.forEach(node => {
        if (node.nodeType !== Node.ELEMENT_NODE) return
        if (node.tagName.toLowerCase() === 'button') applyDirective(node)
        node.querySelectorAll?.('button').forEach(applyDirective)
      })
    })
  })
  
  observer.observe(document.body, { childList: true, subtree: true })
  

以上方案会自动覆盖静态编写的按钮、框架动态渲染的按钮、第三方组件输出的原生button，后续需要调整逻辑只需要修改一处代码，可维护性远高于全局查找替换。

内容的提问来源于stack exchange，提问作者user3006967