ビルドの要らない部品化

<div class="card">
  <h2>投稿されたコメント</h2>
  <p>この機能、助かりました。ありがとうございます。</p>
  <!-- 中身に元の表記を書いておけば、JS が動かなくても意味が残る -->
  <span class="log">投稿: <relative-time datetime="2026-08-29T10:00:00Z">2026年8月29日</relative-time></span>
</div>

<div class="card">
  <h2>前回のログイン</h2>
  <p>別の端末からのアクセスがありました。</p>
  <span class="log">日時: <relative-time datetime="2026-08-31T21:30:00Z">2026年8月31日</relative-time></span>
</div>

/* Shadow DOM を使わないカスタム要素には、外側の CSS がそのまま届く。
   既存のデザインシステムに馴染ませたいときはこちらが楽。 */
relative-time {
  display: inline-block;
  font-variant-numeric: tabular-nums;
}

/* 定義が終わるまでは :defined が付かない。
   定義前に中身が空で見えるのを防ぐには、この形で隠しておく。 */
relative-time:not(:defined) { visibility: hidden; }

.card {
  background: #fff; border: 1px solid var(--line);
  border-radius: 12px; padding: 1rem 1.1rem;
}
.card h2 { margin: 0 0 .4rem; font-size: 1rem; line-height: 1.6; }
.card p { margin: 0; color: var(--muted); line-height: 1.85; font-size: .9rem; }
.log { display: block; margin-top: .6rem; font-size: .84rem; color: var(--accent); line-height: 1.8; }

// HTMLElement を継承したクラスを作り、タグ名を登録するだけ。
// タグ名にはハイフンが必須（標準のタグと衝突させないため）。
class RelativeTime extends HTMLElement {
  // 要素が文書に挿入されたときに呼ばれる。
  // ここで初めて DOM を触るのが約束事。constructor では触らない。
  connectedCallback() {
    this.render();
  }

  render() {
    const iso = this.getAttribute("datetime");
    const t = iso ? new Date(iso) : null;
    if (!t || Number.isNaN(t.getTime())) return; // 中身は元の表記のまま残す

    const diff = (Date.now() - t.getTime()) / 1000;
    const rtf = new Intl.RelativeTimeFormat("ja", { numeric: "auto" });
    const table = [
      [60, "second", 1],
      [3600, "minute", 60],
      [86400, "hour", 3600],
      [2592000, "day", 86400],
    ];
    const row = table.find(([limit]) => diff < limit);

    this.textContent = row
      ? rtf.format(-Math.round(diff / row[2]), row[1])
      : t.toLocaleDateString("ja-JP");

    // 元の絶対時刻はツールチップと支援技術のために残す
    this.title = t.toLocaleString("ja-JP");
  }
}

customElements.define("relative-time", RelativeTime);

<stat-card class="good" label="継続率" value="94%" note="直近30日"></stat-card>
<stat-card label="導入社数" value="1,280" note="前月比 +42"></stat-card>
<stat-card class="warn" label="保存容量" value="残り 8%" note="整理を推奨"></stat-card>

/* この宣言は Shadow DOM の内側には届かない。
   「壊されない部品」を作るとき、これが最大の利点になる。 */
.danger-zone p { color: #dc2626 !important; font-size: 2rem !important; }

/* 外から見た目を変えたいところだけ、カスタムプロパティで穴を開ける。
   変数は Shadow 境界を越えて継承されるので、これが唯一の作法。 */
stat-card { --card-accent: #2563eb; }
stat-card.warn { --card-accent: #d97706; }
stat-card.good { --card-accent: #0f7b53; }

/* ::part で指定された部分だけは、外から直接触れる */
stat-card::part(value) { letter-spacing: 0; }

// テンプレートは1度だけ作って全インスタンスで使い回す。
// 要素ごとに innerHTML を組み立てるより速い。
const tpl = document.createElement("template");
tpl.innerHTML = `
  <style>
    /* このスタイルは外へ漏れず、外からも壊されない。
       :host はカスタム要素そのものを指す。 */
    :host {
      display: block;
      background: #fff;
      border: 1px solid #e2e6ee;
      border-left: 4px solid var(--card-accent, #5a6478);
      border-radius: 12px;
      padding: 0.9rem 1.1rem;
      font-family: inherit;   /* フォントは継承させたいので明示的に受ける */
    }
    .label { font-size: 0.82rem; color: #5a6478; line-height: 1.7; }
    .value {
      font-size: 1.5rem; font-weight: 800; line-height: 1.4;
      color: var(--card-accent, #1b2030);
      font-variant-numeric: tabular-nums;
    }
    .note { font-size: 0.8rem; color: #98a2b5; line-height: 1.8; }
  </style>
  <div class="label"></div>
  <div class="value" part="value"></div>
  <div class="note"></div>
`;

class StatCard extends HTMLElement {
  connectedCallback() {
    if (this.shadowRoot) return;               // 二重描画を防ぐ
    const root = this.attachShadow({ mode: "open" });
    root.append(tpl.content.cloneNode(true));

    root.querySelector(".label").textContent = this.getAttribute("label") ?? "";
    root.querySelector(".value").textContent = this.getAttribute("value") ?? "";
    root.querySelector(".note").textContent = this.getAttribute("note") ?? "";
  }
}

customElements.define("stat-card", StatCard);

<note-box tone="info">
  <span slot="title">補足</span>
  <p>名前付きの <code>slot</code> は複数置けます。指定しなかった中身は、既定の（名前なしの）slot にまとめて入ります。</p>
</note-box>

<note-box tone="warn">
  <span slot="title">注意</span>
  <p>Shadow DOM の中身と違い、slot に差し込まれた要素は<strong>外側の CSS が効きます</strong>。上の <code>note-box p</code> の指定がそのまま当たっています。</p>
  <p>これは欠点ではなく設計です。器は部品が持ち、文章の体裁はページ側が持つ、という分担になります。</p>
</note-box>

<note-box>
  <!-- slot="title" を省略すると、部品側の既定値が使われる -->
  <p>タイトルを省略すると、部品に書いた既定のテキストが出ます。<code>&lt;slot&gt;</code> の中身がそのまま代替値になる仕組みです。</p>
</note-box>

/* slot に差し込まれた中身は「外側の DOM のまま」なので、
   外側の CSS がそのまま効く。Shadow の内側とは扱いが違う。 */
note-box p { margin: 0 0 .5rem; line-height: 1.85; }
note-box p:last-child { margin-bottom: 0; }
note-box a { color: var(--accent); }
note-box code {
  background: rgba(27, 32, 48, .07);
  padding: .1em .35em; border-radius: 5px; font-size: .92em;
}

const tpl = document.createElement("template");
tpl.innerHTML = `
  <style>
    :host {
      display: block;
      border-radius: 12px;
      padding: 0.9rem 1.1rem;
      border: 1px solid var(--tone-line, #e2e6ee);
      background: var(--tone-bg, #fff);
      font-family: inherit;
      color: inherit;
    }
    :host([tone="info"]) { --tone-bg: #eff6ff; --tone-line: #bfdbfe; --tone-ink: #1e40af; }
    :host([tone="warn"]) { --tone-bg: #fffbeb; --tone-line: #fde68a; --tone-ink: #92400e; }

    .head {
      display: flex; align-items: baseline; gap: .5rem;
      margin-bottom: .45rem;
      font-weight: 700; line-height: 1.6;
      color: var(--tone-ink, #1b2030);
    }
    .mark { font-size: .9em; }
    /* ::slotted は差し込まれた要素の「一番外側」だけに当たる。
       入れ子の子孫には届かないので、細かい装飾は外側の CSS に任せる。 */
    ::slotted(p:first-of-type) { margin-top: 0; }
  </style>
  <div class="head">
    <span class="mark" aria-hidden="true">●</span>
    <slot name="title">メモ</slot>
  </div>
  <slot></slot>
`;

class NoteBox extends HTMLElement {
  connectedCallback() {
    if (this.shadowRoot) return;
    this.attachShadow({ mode: "open" }).append(tpl.content.cloneNode(true));
  }
}

customElements.define("note-box", NoteBox);

<progress-ring value="42" label="アップロード"></progress-ring>

<div class="row">
  <button class="btn" type="button" data-set="10">10%</button>
  <button class="btn" type="button" data-set="42">42%</button>
  <button class="btn" type="button" data-set="88">88%</button>
  <button class="btn" type="button" data-set="100">100%</button>
  <button class="btn" type="button" id="toggle-compact">compact を切替</button>
</div>

<pre class="out" id="out"></pre>

const tpl = document.createElement("template");
tpl.innerHTML = `
  <style>
    :host { display: flex; align-items: center; gap: 1rem; font-family: inherit; }
    :host([compact]) { gap: .6rem; }
    :host([compact]) svg { width: 44px; height: 44px; }
    svg { width: 76px; height: 76px; flex: none; }
    .track { stroke: #e2e6ee; }
    .bar {
      stroke: #2563eb; stroke-linecap: round;
      transition: stroke-dashoffset .35s cubic-bezier(.2,.8,.2,1);
    }
    .txt { font-size: .95rem; font-weight: 700; line-height: 1.5; }
    .lbl { font-size: .84rem; color: #5a6478; line-height: 1.8; }
    :host([compact]) .lbl { display: none; }
    @media (prefers-reduced-motion: reduce) { .bar { transition: none; } }
  </style>
  <svg viewBox="0 0 100 100" role="img">
    <circle class="track" cx="50" cy="50" r="42" fill="none" stroke-width="10"></circle>
    <circle class="bar" cx="50" cy="50" r="42" fill="none" stroke-width="10"
            transform="rotate(-90 50 50)"></circle>
  </svg>
  <div>
    <div class="txt"></div>
    <div class="lbl"></div>
  </div>
`;

class ProgressRing extends HTMLElement {
  // 監視したい属性をここに列挙する。書き忘れると変更が届かない。
  static observedAttributes = ["value", "label", "compact"];

  connectedCallback() {
    if (!this.shadowRoot) {
      this.attachShadow({ mode: "open" }).append(tpl.content.cloneNode(true));
    }
    this.render();
  }

  // 属性が変わるたびに呼ばれる。connectedCallback より先に呼ばれることも
  // あるので、shadowRoot の有無を必ず確認してから触る。
  attributeChangedCallback() {
    if (this.shadowRoot) this.render();
  }

  // 属性は文字列。数値として扱う窓口をプロパティで用意しておくと、
  // JS からは el.value = 60 と書けて読みやすくなる。
  get value() { return Number(this.getAttribute("value") ?? 0); }
  set value(v) { this.setAttribute("value", String(v)); }

  // 真偽値は「属性があるかどうか」で表す。value="false" は
  // 文字列 "false" が入るだけで真になってしまうので使わない。
  get compact() { return this.hasAttribute("compact"); }
  set compact(on) { this.toggleAttribute("compact", Boolean(on)); }

  render() {
    const pct = Math.max(0, Math.min(100, this.value));
    const circumference = 2 * Math.PI * 42;
    const bar = this.shadowRoot.querySelector(".bar");
    bar.style.strokeDasharray = String(circumference);
    bar.style.strokeDashoffset = String(circumference * (1 - pct / 100));

    this.shadowRoot.querySelector(".txt").textContent = pct + "%";
    this.shadowRoot.querySelector(".lbl").textContent = this.getAttribute("label") ?? "";
    this.shadowRoot.querySelector("svg")
      .setAttribute("aria-label", (this.getAttribute("label") ?? "進捗") + " " + pct + "%");
  }
}

customElements.define("progress-ring", ProgressRing);

// --- 動作確認 ---
const ring = document.querySelector("progress-ring");
const out = document.getElementById("out");
const log = () =>
  (out.textContent =
    "属性 value: " + JSON.stringify(ring.getAttribute("value")) + "（文字列）\n" +
    "プロパティ .value: " + ring.value + "（数値）\n" +
    "属性 compact: " + (ring.hasAttribute("compact") ? "あり" : "なし") + "\n" +
    "プロパティ .compact: " + ring.compact);

document.querySelectorAll("[data-set]").forEach((b) =>
  b.addEventListener("click", () => { ring.value = Number(b.dataset.set); log(); }),
);
document.getElementById("toggle-compact").addEventListener("click", () => {
  ring.compact = !ring.compact;
  log();
});
log();