Angular指令转Web Component失效问题排查求助

核心问题 #

Angular的createCustomElementAPI仅支持转换Angular组件（@Component），不支持直接转换属性型指令（@Directive）。Web Component本质是自定义HTML元素，需要对应独立的标签；而属性指令是附加在现有元素上的行为扩展，两者的设计模型完全不兼容，这就是你转换后无法工作的根本原因。

你的代码问题分析 #

你尝试将TooltipDirective（属性指令）传入createCustomElement，这不符合API的使用要求，所以即使注册了web-tooltip自定义元素，也无法触发指令的逻辑。

解决方案 #

方案1：将指令封装为Angular组件后转换

把原Tooltip指令的逻辑封装到一个Angular组件中，再将组件转为Web Component：

1. 创建包裹型Tooltip组件

import { Component, ElementRef, Input } from '@angular/core';

@Component({
  selector: 'web-tooltip',
  template: `<ng-content></ng-content>`,
  styles: [`
    :host {
      position: relative;
      display: inline-block;
    }
    :host::after {
      content: attr(content);
      position: absolute;
      bottom: 120%;
      left: 50%;
      transform: translateX(-50%);
      background: #333;
      color: white;
      padding: 4px 8px;
      border-radius: 4px;
      font-size: 12px;
      opacity: 0;
      transition: opacity 0.2s;
      pointer-events: none;
    }
    :host:hover::after {
      opacity: 1;
    }
  `]
})
export class WebTooltipComponent {
  @Input() content!: string;

  constructor(private el: ElementRef) {
    this.el.nativeElement.classList.add('my-tooltip');
  }
}

2. 在AppModule中转换并注册组件

import { NgModule, DoBootstrap, Injector } from '@angular/core';
import { createCustomElement } from '@angular/elements';
import { WebTooltipComponent } from './web-tooltip.component';

@NgModule({
  declarations: [WebTooltipComponent],
  imports: [],
  providers: []
})
export class AppModule implements DoBootstrap {
  constructor(private injector: Injector) {}

  ngDoBootstrap() {
    const webTooltipElement = createCustomElement(WebTooltipComponent, {
      injector: this.injector
    });
    customElements.define('web-tooltip', webTooltipElement);
  }
}

3. 使用方式

<web-tooltip content="This is a tooltip.">
  Hover me to see tooltip
</web-tooltip>

方案2：直接用原生Web Component API实现Tooltip

如果不需要依赖Angular的生态，直接用原生Custom Elements API实现Tooltip，更贴合Web Component的原生特性：

class WebTooltip extends HTMLElement {
  constructor() {
    super();
    this.classList.add('my-tooltip');
    this.style.position = 'relative';
    this.style.display = 'inline-block';
  }

  connectedCallback() {
    this.addEventListener('mouseenter', this.showTooltip);
    this.addEventListener('mouseleave', this.hideTooltip);
  }

  disconnectedCallback() {
    this.removeEventListener('mouseenter', this.showTooltip);
    this.removeEventListener('mouseleave', this.hideTooltip);
  }

  showTooltip() {
    const tooltipContent = this.getAttribute('content');
    if (!tooltipContent) return;

    const tooltipEl = document.createElement('span');
    tooltipEl.textContent = tooltipContent;
    tooltipEl.style.position = 'absolute';
    tooltipEl.style.bottom = '120%';
    tooltipEl.style.left = '50%';
    tooltipEl.style.transform = 'translateX(-50%)';
    tooltipEl.style.background = '#333';
    tooltipEl.style.color = 'white';
    tooltipEl.style.padding = '4px 8px';
    tooltipEl.style.borderRadius = '4px';
    tooltipEl.style.fontSize = '12px';
    tooltipEl.style.opacity = '0';
    tooltipEl.style.transition = 'opacity 0.2s';
    tooltipEl.style.pointerEvents = 'none';
    this.appendChild(tooltipEl);

    setTimeout(() => {
      tooltipEl.style.opacity = '1';
    }, 10);
  }

  hideTooltip() {
    const tooltipEl = this.querySelector('span[style*="position: absolute"]');
    if (tooltipEl) {
      tooltipEl.style.opacity = '0';
      setTimeout(() => {
        tooltipEl.remove();
      }, 200);
    }
  }
}

customElements.define('web-tooltip', WebTooltip);

使用方式和之前一致：

<web-tooltip content="This is a tooltip.">
  Hover me to see tooltip
</web-tooltip>

注意事项 #

• 方案1中，Angular组件转Web Component时，样式会被封装到自定义元素内部，确保样式隔离；
• 方案2的原生实现更轻量，不需要依赖Angular框架，适合跨框架使用；
• 无论哪种方案，都需要确保自定义元素的标签名包含连字符（比如web-tooltip），这是Web Component的强制要求。

内容的提问来源于stack exchange，提问作者Varun'Ui