Bug 280807

Summary:

:scope :state not work

Product:

WebKit

Reporter:

709922234

Component:

CSS

Assignee:

Nobody <webkit-unassigned>

Status:

NEW

Severity:

Normal

CC:

karlcow, koivisto, rniwa, webkit-bug-importer

Priority:

Keywords:

BrowserCompat, InRadar

Version:

WebKit Nightly Build

Hardware:

Unspecified

OS:

Unspecified

Bug Depends on:

Bug Blocks:

148695

Attachments:

Description	Flags
rendering in safari, firefox, chrome	none

709922234

Reported 2024-10-02 21:33:01 PDT

Steps to reproduce: 1. visit https://codepen.io/mantou132/pen/JjQLRgx 2. click button Actual results: content invisible Expected results: Content can switch display status

Attachments
rendering in safari, firefox, chrome (4.31 MB, image/png) 2024-10-11 06:34 PDT, Karl Dubost	no flags	Details
View All Add attachment proposed patch, testcase, etc.

709922234

Comment 1 2024-10-02 21:34:54 PDT

Firefox: https://bugzilla.mozilla.org/show_bug.cgi?id=1914099 At present, only Chrome works as expected

Radar WebKit Bug Importer

Comment 2 2024-10-09 21:33:13 PDT

<rdar://problem/137649619>

Karl Dubost

Comment 3 2024-10-11 06:34:28 PDT

Created attachment 472905 [details] rendering in safari, firefox, chrome BEFORE CLICK AFTER CLICK * Safari nothing nothing * Firefox "content" "content" * Chrome nothing "content"

Karl Dubost

Comment 4 2024-10-11 06:35:31 PDT

<button id=btn>toggle content visible</button> <my-element> </my-element> with @scope (my-element) { :scope:not(:state(open)) { display: none; } } and customElements.define('my-element', class extends HTMLElement { constructor() { super(); this.internals = this.attachInternals(); this.innerHTML = 'content'; btn.onclick = () => { if (this.internals.states.has('open')) { this.internals.states.delete('open') } else { this.internals.states.add('open') } } } })

Note You need to log in before you can comment on or make changes to this bug.