【Angular】selectorの種類まとめ！要素・属性・クラスの使い分けガイド

import { Component } from '@angular/core';

@Component({
  selector: 'app-user-card',
  template: `
    <div class="user-card">
      <h3>{{ userName }}</h3>
      <p>{{ userEmail }}</p>
    </div>
  `,
  styles: [`
    .user-card {
      border: 1px solid #ddd;
      border-radius: 8px;
      padding: 1rem;
      margin: 0.5rem;
      background-color: #f9f9f9;
    }
    h3 {
      margin-top: 0;
      color: #333;
    }
    p {
      color: #666;
      margin-bottom: 0;
    }
  `]
})
export class UserCardComponent {
  userName = '田中太郎';
  userEmail = 'tanaka@example.com';
}

<app-user-card></app-user-card>

// 良い例
@Component({
  selector: 'app-product-list',
  // ...
})

// 悪い例（ハイフンなし）
@Component({
  selector: 'productlist', // HTMLの仕様に反する
  // ...
})

import { Component } from '@angular/core';

@Component({
  selector: '[app-tooltip]',
  template: `
    <div class="tooltip" *ngIf="showTooltip">
      {{ tooltipText }}
    </div>
    <ng-content></ng-content>
  `,
  styles: [`
    .tooltip {
      position: absolute;
      background-color: #333;
      color: white;
      padding: 0.5rem;
      border-radius: 4px;
      font-size: 0.875rem;
      z-index: 1000;
    }
  `]
})
export class TooltipComponent {
  showTooltip = false;
  tooltipText = 'ツールチップの内容';

  @HostListener('mouseenter')
  onMouseEnter() {
    this.showTooltip = true;
  }

  @HostListener('mouseleave')
  onMouseLeave() {
    this.showTooltip = false;
  }
}

<button app-tooltip>ホバーしてください</button>
<span app-tooltip>テキストにもツールチップを追加</span>

@Component({
  selector: '[app-button-style="primary"]',
  template: `
    <ng-content></ng-content>
  `,
  styles: [`
    :host {
      background-color: #007bff;
      color: white;
      border: none;
      padding: 0.75rem 1.5rem;
      border-radius: 4px;
      cursor: pointer;
    }
    :host:hover {
      background-color: #0056b3;
    }
  `]
})
export class PrimaryButtonComponent {}

<button app-button-style="primary">プライマリボタン</button>

import { Component } from '@angular/core';

@Component({
  selector: '.app-highlight-box',
  template: `
    <div class="highlight-content">
      <ng-content></ng-content>
    </div>
  `,
  styles: [`
    .highlight-content {
      background-color: #fff3cd;
      border: 1px solid #ffeaa7;
      padding: 1rem;
      border-radius: 4px;
    }
  `]
})
export class HighlightBoxComponent {}

<div class="app-highlight-box">
  <p>この内容がハイライトされます</p>
</div>

@Component({
  selector: 'app-modal, [app-modal]',
  template: `
    <div class="modal-backdrop">
      <div class="modal-content">
        <ng-content></ng-content>
      </div>
    </div>
  `,
  styles: [`
    .modal-backdrop {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.5);
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .modal-content {
      background-color: white;
      padding: 2rem;
      border-radius: 8px;
      max-width: 500px;
      width: 90%;
    }
  `]
})
export class ModalComponent {}

<!-- 要素セレクターとして -->
<app-modal>
  <p>モーダルの内容</p>
</app-modal>

<!-- 属性セレクターとして -->
<div app-modal>
  <p>モーダルの内容</p>
</div>

@Component({
  selector: '[app-form-field]:not(textarea)',
  template: `
    <label>{{ label }}</label>
    <ng-content></ng-content>
  `,
  styles: [`
    :host {
      display: block;
      margin-bottom: 1rem;
    }
    label {
      display: block;
      margin-bottom: 0.5rem;
      font-weight: bold;
      color: #333;
    }
  `]
})
export class FormFieldComponent {
  label = 'フィールドラベル';
}

@Component({
  selector: 'button[type="submit"][app-loading]',
  template: `
    <span class="loading-spinner" *ngIf="isLoading"></span>
    <ng-content></ng-content>
  `,
  styles: [`
    :host {
      position: relative;
    }
    .loading-spinner {
      display: inline-block;
      width: 16px;
      height: 16px;
      border: 2px solid #f3f3f3;
      border-top: 2px solid #333;
      border-radius: 50%;
      animation: spin 1s linear infinite;
      margin-right: 0.5rem;
    }
    @keyframes spin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }
  `]
})
export class LoadingButtonComponent {
  isLoading = true;
}

<button type="submit" app-loading>送信</button>

// 商品カードのような独立したコンポーネント
@Component({
  selector: 'app-product-card',
  // ...
})

// ボタンの機能を拡張する場合
@Component({
  selector: 'button[app-confirm]',
  // ...
})

// フォームの送信ボタンのみに適用
@Component({
  selector: 'button[type="submit"][app-form-submit]',
  // ...
})