bug(mock-doc): `Element.toggleAttribute()` is missing, so components that use it fail during SSR

オープン 初心者向け
  • 何か問題がありますか？
#7,015 コメント 0 件 リアクション 0 件 担当者 0 名 GitHub で見る

メンテナーはふだん 1 日以内に返信

まだ誰も着手していません。

評価

難易度
2/5
見積もり時間
1〜3時間
初心者へのやさしさ
78/100
issue の種類
バグ
明瞭さ
明確に書かれている
活発さ
活発
技術スタック
typescript
領域
web-dev

調査の方向性

このメソッドは packages/mock-doc/src/node.ts の MockElement に、hasAttribute、setAttribute、removeAttribute と並べて追加します。まずこれらを読んで規約を合わせてください。そのうえで、MockDocument の要素に対して toggleAttribute を呼び出し、欠けているメソッドを再現します。完了の条件は、toggleAttribute が issue の表にある 4 つのケース（force あり・なし）をカバーし、正しい真偽値を返すこと、そして既存の mock-doc テストがすべて通ることです。

索引モデルが issue の本文から書いたものです。

説明

triage
Prerequisites
Stencil Version

4.45.3 and 5.0.0-rc.1

Current Behavior

mock-doc's MockElement doesn't implement Element.toggleAttribute(). Server rendering runs components on mock-doc, so a component that calls it works in the browser but throws during renderToString(). The render still completes, but the attribute is missing from the output and the error appears only in diagnostics, which makes the bug easy to miss.

toggleAttribute() is the standard way to set a boolean attribute from state, and every browser Stencil 5 supports has it, so component authors reach for it naturally.

Expected Behavior
Workaround

Authors replace it with an explicit branch:

active ? this.el.setAttribute('data-active', '') : this.el.removeAttribute('data-active');

It works, but every component that may be server-rendered has to know to avoid a standard DOM method.

Suggested fix

Add toggleAttribute() to MockElement in packages/mock-doc/src/node.ts, next to hasAttribute, setAttribute and removeAttribute, with the DOM's semantics for the optional force argument:

toggleAttribute(attrName: string, force?: boolean): boolean {
  const has = this.hasAttribute(attrName);
  if (force === undefined ? !has : force) {
    if (!has) this.setAttribute(attrName, '');
    return true;
  }
  if (has) this.removeAttribute(attrName);
  return false;
}

┌─────────────────────────────┬──────────────────┬───────────┬─────────┐
│            Call             │ Attribute before │   After   │ Returns │
├─────────────────────────────┼──────────────────┼───────────┼─────────┤
│ toggleAttribute('a')        │ absent           │ a=""      │ true    │
├─────────────────────────────┼──────────────────┼───────────┼─────────┤
│ toggleAttribute('a')        │ present          │ absent    │ false   │
├─────────────────────────────┼──────────────────┼───────────┼─────────┤
│ toggleAttribute('a', true)  │ present          │ unchanged │ true    │
├─────────────────────────────┼──────────────────┼───────────┼─────────┤
│ toggleAttribute('a', false) │ absent           │ unchanged │ false   │
└─────────────────────────────┴──────────────────┴───────────┴─────────┘

Going through setAttribute and removeAttribute keeps mock-doc's existing attame lowercasing, and the attributeChangedCallback behavior.

System Info
Steps to Reproduce

Reproduction

import { Component, Element, Prop, h } from '@stencil/core';

@Component({ tag: 'my-flag', encapsulation: { type: 'shadow' } })
export class MyFlag {
  @Element() el!: HTMLElement;
  @Prop() active = false;

  componentWillLoad() {
    this.el.toggleAttribute('data-active', this.active);
  }

  render() {
    return <slot />;
  }
}

import { renderToString } from './hydrate/index.js';

const r = await renderToString('<my-flag active>Hi</my-flag>', { fullDocument: false });
console.log(r.html);        // <my-flag active="" class="hydrated" s-id="1">…: no data-active
console.log(r.diagnostics); // TypeError: this.el.toggleAttribute is not a function

The same happens with new MockDocument() directly: typeof doc.createElement('div').toggleAttribute is 'undefined', on 4.45.3 and 5.0.0-rc.1.

### Code Reproduction URL

https://github.com

### Additional Information

_No response_
主要言語
TypeScript
スター
13.2k
フォーク
865
平均マージ
2日 16時間
マージ済み PR（30日）
29

環境構築

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

stenciljs/core のほかの issue

stenciljs/core の issue をすべて見る

似ている issue

TypeScript の issue をもっと見る

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。