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

Đang mở Phù hợp với người mới
  • Có gì không ổn?
#7,015 0 bình luận 0 reaction 0 người được giao Xem trên GitHub

Maintainer thường phản hồi trong vòng 1 ngày

Chưa có ai nhận issue này.

Đánh giá

Độ khó
2/5
Thời gian dự kiến
1-3 giờ
Mức phù hợp với người mới
78/100
Loại issue
Lỗi
Độ rõ ràng
Đặc tả rõ ràng
Mức độ hoạt động
Sôi nổi
Công nghệ
typescript
Lĩnh vực
web-dev

Hướng nghiên cứu

Phương thức này thuộc về MockElement trong packages/mock-doc/src/node.ts, cạnh hasAttribute, setAttribute và removeAttribute. Hãy đọc những phương thức đó trước để làm theo quy ước của chúng, rồi tái hiện phương thức còn thiếu bằng cách gọi toggleAttribute trên một phần tử MockDocument. Hoàn thành khi toggleAttribute bao phủ bốn trường hợp trong bảng của issue (có và không có force), trả về đúng giá trị boolean, và các test mock-doc hiện có vẫn chạy thành công.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Mô tả

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_
Ngôn ngữ chính
TypeScript
Star
13.2k
Fork
865
Merge trung bình
2 ngày 16 giờ
Pull request đã merge (30 ngày)
29

Chuẩn bị môi trường

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Issue khác của stenciljs/core

Tất cả issue của stenciljs/core

Issue tương tự

Thêm issue về TypeScript

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.