gui: `--foo` 形式の CustomState を利用しない 一部のバージョンの Chromium ブラウザ向けにフォールバックで利用 していたが、 Chrome がコンソールにエラーを出しやがるためやめた。 対象のバージョンのブラウザは属性を使うようになる。パフォーマンス への影響が不明だが、開発者側からはどうしようもできない短慮設計 なのでもう知らん。フォールバックを判別とかしてないし、まじでどう しようもない。 <https://chromestatus.com/feature/5140610730426368>

Changes

9 changed files (+39/-33)

• packages/gui/src/components/button/button.css
  • @@ -36,12 +36,12 @@ cursor: not-allowed;
    text-decoration: line-through; } - :host(:is(:state(pending), :--pending, [x--_pending])) { + :host(:is(:state(pending), [x--_pending])) { color: transparent; } @media (hover: hover) { - :host(:not(:is(:disabled, [aria-disabled="true"], :state(pending), :--pending, [x--_pending])):hover) { + :host(:not(:is(:disabled, [aria-disabled="true"], :state(pending), [x--_pending])):hover) { border-color: oklch(var(--color-border) / var(--alpha-border-strong)); } }
  • @@ -53,7 +53,7 @@ oklch(var(--color-focus) / var(--alpha-focus-ring));
    outline: none; } - :host(:enabled:not(:is([aria-disabled="true"], :state(pending), :--pending, [x--_pending])):is(:active, :state(pressed), :--pressed, [x--_pressed])) { + :host(:enabled:not(:is([aria-disabled="true"], :state(pending), [x--_pending])):is(:active, :state(pressed), [x--_pressed])) { background-image: linear-gradient( to left top, oklch(100% 0% 0deg / 30%),
  • @@ -76,7 +76,7 @@ border-radius: inherit;
    text-align: center; } - :host(:not(:is(:disabled, [aria-disabled="true"], :state(pending), :--pending, [x--_pending])):is(:active, :state(pressed), :--pressed, [x--_pressed])) + :host(:not(:is(:disabled, [aria-disabled="true"], :state(pending), [x--_pending])):is(:active, :state(pressed), [x--_pressed])) .inner { transform: translateY(1px); filter: brightness(0.99);
  • @@ -108,7 +108,7 @@ transform: rotate(360deg);
    } } - :host(:is(:state(pending), :--pending, [x--_pending])) .spinner { + :host(:is(:state(pending), [x--_pending])) .spinner { display: block; animation: 1.3s 0s forwards infinite ease-in-out spin; }
• packages/gui/src/components/button/button.ts
  • @@ -76,7 +76,9 @@
    this.internals.role = "button"; } - connectedCallback() { + override connectedCallback() { + super.connectedCallback(); + // NOTE: 現状属性に影響を与えずに `tabIndex` を変える方法がない。 // 属性を変える操作は DOM に接続してから行わないと DOM のエラー // となるためここで行う必要がある。
• packages/gui/src/components/callout/callout.ts
  • @@ -37,5 +37,9 @@ actions.name = "action";
    actions.classList.add("actions"); body.appendChild(actions); } + + override connectedCallback(): void { + super.connectedCallback(); + } }, });
• packages/gui/src/element.ts
  • @@ -22,7 +22,7 @@
    /** * CustomElement を使いやすい I/F にラップする。 * 渡された CustomElement は自動的に `nonUAMixin` が適用され、 - * `:is(:state(nonua), :--nonua, [nonua])` でクエリできるようになる。 + * `:is(:state(nonua), [x--_nonua])` でクエリできるようになる。 */ export function wrapElement< TagName extends string,
  • @@ -64,13 +64,12 @@ *
    * 付与するマーカーは以下の通り: * * A) CustomStateSet の `nonua` ステート (Evergreen Browser) - * B) CustomStateSet の `--nonua` ステート (Chromium v90 <= x < v125) - * C) `x--_nonua` 属性 + * B) `x--_nonua` 属性 * * 全てのマーカーに対応するには以下のようなセレクタが必要。 * * ```css - * :is(:state(nonua), :--nonua, [nonua]) + * :is(:state(nonua), [x--_nonua]) * ``` */ export class YamoriElement extends HTMLElement {
  • @@ -79,29 +78,20 @@
    setCustomState(name: string): void { const internals = this.internals; - if (internals && internals.states) { - // https://developer.mozilla.org/en-US/docs/Web/API/CustomStateSet#compatibility_with_dashed-ident_syntax - try { - internals.states.add(name); - } catch { - internals.states.add(`--${name}`); - } - } else { - this.setAttribute(`--_${name}`, ""); + try { + internals.states.add(name); + } catch { + this.setAttribute(`x--_${name}`, ""); } } removeCustomState(name: string): void { const internals = this.internals; - if (internals && internals.states) { - try { - internals.states.delete(name); - } catch { - internals.states.delete(`--${name}`); - } - } else { - this.removeAttribute(`--_${name}`); + try { + internals.states.delete(name); + } catch { + this.removeAttribute(`x--_${name}`); } }
  • @@ -109,7 +99,9 @@ constructor() {
    super(); this.internals = this.attachInternals(); + } + connectedCallback() { this.setCustomState("nonua"); } }
• packages/gui/src/reset.css
  • @@ -6,7 +6,7 @@ */
    /* UA スタイルを全部消す */ :where(body, body - :not(script, style, svg, svg *, :is([x--_nonua], :--nonua, :state(nonua)))) { + :not(script, style, svg, svg *, :is([x--_nonua], :state(nonua)))) { all: unset; box-sizing: border-box; }
• packages/gui/src/widgets/workspace-list-entry/workspace-list-entry.css
  • @@ -3,7 +3,7 @@ * SPDX-FileCopyrightText: 2024 Shota FUJI <pockawoooh@gmail.com>
    * SPDX-License-Identifier: AGPL-3.0-only */ - :not(:is(style, script, :state(nonua), :--nonua, [nonua])) { + :not(:is(style, script, :state(nonua), [x--_nonua])) { all: unset; box-sizing: border-box; }
  • @@ -15,7 +15,7 @@ padding: var(--space-px-8) var(--space-px-5);
    padding-bottom: var(--space-px-9); } - :host(:is(:state(nodata), :--nodata, [nodata])) { + :host(:is(:state(nodata), [x--_nodata])) { display: none; }
• packages/gui/src/widgets/workspace-list-entry/workspace-list-entry.ts
  • @@ -46,6 +46,10 @@ this.#endMarker = document.createComment("");
    this.#shadow.appendChild(this.#endMarker); this.internals.role = "listitem"; + } + + override connectedCallback(): void { + super.connectedCallback(); this.#render(); }
• packages/gui/src/widgets/workspace-list/workspace-list.css
  • @@ -3,7 +3,7 @@ * SPDX-FileCopyrightText: 2024 Shota FUJI <pockawoooh@gmail.com>
    * SPDX-License-Identifier: AGPL-3.0-only */ - :not(:is(style, script, :state(nonua), :--nonua, [nonua])) { + :not(:is(style, script, :state(nonua), [x--_nonua])) { all: unset; box-sizing: border-box; }
• packages/gui/src/widgets/workspace-list/workspace-list.ts
  • @@ -77,6 +77,12 @@ return null;
    } } + override connectedCallback(): void { + super.connectedCallback(); + + this.#render(); + } + constructor() { super();
  • @@ -93,8 +99,6 @@ this.#shadow.appendChild(this.#startMarker);
    this.#endMarker = document.createComment(""); this.#shadow.appendChild(this.#endMarker); - - this.#render(); } setListResponse(listResponse: ListResponse): void {