NEW 280807
:scope :state not work 
https://bugs.webkit.org/show_bug.cgi?id=280807
Summary :scope :state not work
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.