WebKit Bugzilla
New
Browse
Log In
×
Sign in with GitHub
or
Remember my login
Create Account
·
Forgot Password
Forgotten password account recovery
NEW
293476
Slotted content in custom element not rendering
https://bugs.webkit.org/show_bug.cgi?id=293476
Summary
Slotted content in custom element not rendering
tomherni
Reported
2025-05-23 00:41:52 PDT
Created
attachment 475351
[details]
Reproduction code index.html Under specific circumstances, slotted content does not render in a custom element. It seems that a repaint makes the content appear again. See the attached index.html file. When opening in Safari on either macOS or iOS, you will see a button "Make element appear". This is not the only thing that is supposed to be rendered on the page: there should also be a custom element with slotted text "Hello world". However, this custom element is not visible. Clicking the button will set the custom element's color CSS to red, making the custom element finally appear. As mentioned, this is under specific circumstances. The index.html file contains comments that further elaborate on this. For example: * The custom element appears to require wrapping elements (an inline element such as a span, and a block element such as a div). * There must be another custom element on the page that turns itself into a block element with CSS after a timeout. The circumstances are specific, especially related to the timeout. But when custom elements implement some form of lazy loading, this scenario is very likely to occur. macOS, Sequoia 15.5 (Apple M3) * Safari 18.5 – NOK * Chrome 137 – OK * Firefox 138 – OK iPhone 15 Pro Max, iOS 18.4.1 * Safari – NOK * Brave 1.78 (103) – NOK
Attachments
Reproduction code index.html
(1.73 KB, text/html)
2025-05-23 00:41 PDT
,
tomherni
no flags
Details
macOS Safari actual (NOK)
(283.03 KB, image/png)
2025-05-23 00:43 PDT
,
tomherni
no flags
Details
macOS Safari expected
(287.01 KB, image/png)
2025-05-23 00:43 PDT
,
tomherni
no flags
Details
iOS Safari NOK
(106.10 KB, image/jpeg)
2025-05-23 00:44 PDT
,
tomherni
no flags
Details
macOS Chrome OK
(292.19 KB, image/png)
2025-05-23 00:45 PDT
,
tomherni
no flags
Details
minimal repro with details element
(153 bytes, text/html)
2025-05-23 06:41 PDT
,
Steve Orvell
no flags
Details
repro stp-219
(780 bytes, text/html)
2025-05-23 07:08 PDT
,
Steve Orvell
no flags
Details
Show Obsolete
(1)
View All
Add attachment
proposed patch, testcase, etc.
tomherni
Comment 1
2025-05-23 00:43:07 PDT
Created
attachment 475352
[details]
macOS Safari actual (NOK)
tomherni
Comment 2
2025-05-23 00:43:32 PDT
Created
attachment 475353
[details]
macOS Safari expected
tomherni
Comment 3
2025-05-23 00:44:09 PDT
Created
attachment 475354
[details]
iOS Safari NOK
tomherni
Comment 4
2025-05-23 00:45:10 PDT
Created
attachment 475355
[details]
macOS Chrome OK
Ahmad Saleem
Comment 5
2025-05-23 04:39:07 PDT
*** WebKit ToT (
295329@main
) *** Reproduces and don't get `Hello World` *** Chrome Canary 138.0.7195.0 (Official Build) canary (arm64) *** Does not reproduce and show `Hello World` *** Firefox Nightly 140 (20250522090848) *** Does not reproduce and show `Hello World` *** Ladybird (4b3715ccba326ee983d315d50b1d89cf10827aa3) *** Does not reproduce and show `Hello World`
Steve Orvell
Comment 6
2025-05-23 06:27:24 PDT
Here is an even simpler repro, toggling the details closed/open fixes it. <span> <details open style="border: 1px solid;">details content</details> <span id="s"></span> </span> <script> s.attachShadow({mode: 'open'}); setTimeout(() => { s.shadowRoot.innerHTML = `<style>:host { display: block; }</style>details ok?`; }, 1000); </script>
Steve Orvell
Comment 7
2025-05-23 06:33:35 PDT
And still simpler: <span> <details open style="border: 1px solid;">details content</details> <span id="s">details ok?</span> </span> <script> setTimeout(() => { s.style.display = 'block'; }, 1000); </script>
Steve Orvell
Comment 8
2025-05-23 06:41:17 PDT
Created
attachment 475356
[details]
minimal repro with details element Details text disappears when adjacent span asynchronously becomes `display: block`. Toggle the details open/closed to fix.
Steve Orvell
Comment 9
2025-05-23 06:45:14 PDT
Huh, that attached version repros on Safari Version 18.3 (20620.2.4.11.5), but not STP Release 219 (Safari 18.4, WebKit 20622.1.12).
tomherni
Comment 10
2025-05-23 07:03:16 PDT
@Steve Yeah both of those don't repro for me either in Safari 18.5. I guess that's a different issue that's already fixed.
Steve Orvell
Comment 11
2025-05-23 07:08:45 PDT
Created
attachment 475357
[details]
repro stp-219 This one repros for me on STP-219 using just Shadow DOM.
Radar WebKit Bug Importer
Comment 12
2025-05-30 00:42:16 PDT
<
rdar://problem/152298695
>
Note
You need to
log in
before you can comment on or make changes to this bug.
Top of Page
Format For Printing
XML
Clone This Bug