Bug 280399
| Summary: | Conditionally rendered slot elements causes other slots to be hidden | ||
|---|---|---|---|
| Product: | WebKit | Reporter: | Hans Krywalsky <hanskrywaa> |
| Component: | DOM | Assignee: | Nobody <webkit-unassigned> |
| Status: | NEW | ||
| Severity: | Major | CC: | cdumez, koivisto, rniwa, webkit-bug-importer, willow4 |
| Priority: | P2 | Keywords: | InRadar |
| Version: | Safari 18 | ||
| Hardware: | All | ||
| OS: | macOS 15 | ||
| Bug Depends on: | |||
| Bug Blocks: | 148695 | ||
Hans Krywalsky
Hey there,
this is the first bug i report here. If you need any more info or help from me, please let me know.
We mentioned a strange bug on our website, after we updated to ios18/macOS15: After an element renders a conditionally `slot` element, other `slot` elements on the same page gets removed.
We use lit webcomponents and i also was able to create a very simple reproduction. I started a new default lit project and added simple components.
Link: https://github.com/EinfachHans/ios18-slot-bug
The steps to make it run are described in there.
When you press on "toggle" another slot element is added to the page. In the same moment the slot from the headline component just gets hidden.
| Attachments | ||
|---|---|---|
| Add attachment proposed patch, testcase, etc. |
Mathias R.
Hi,
we're facing the same Bug in a Project with conditionally rendered slots.
In addition to Hans' explanation, I would like to add that this only seems to occur with elements whose slots have display: contents and contain text nodes. If you set the slot to e.g. display: block or wrap the text in an element such as span, p or div, the error does not occur.
In his example that would mean using <my-headline><span>Headline</span></my-headline> in my-app.ts would work.
Radar WebKit Bug Importer
<rdar://problem/137191304>