Skip to content

Commit 79445d0

Browse files
authored
fix: slots work in Safari (#230)
1 parent 0e8e460 commit 79445d0

File tree

1 file changed

+10
-1
lines changed

1 file changed

+10
-1
lines changed

packages/base/src/WebComponent.js

+10-1
Original file line numberDiff line numberDiff line change
@@ -170,7 +170,6 @@ class WebComponent extends HTMLElement {
170170
} else {
171171
this._state[slot] = child;
172172
}
173-
child.setAttribute("slot", slotName);
174173
});
175174
}
176175

@@ -382,12 +381,22 @@ class WebComponent extends HTMLElement {
382381
delete this._invalidated;
383382
ControlRenderer.render(this);
384383

384+
// Safari requires that children get the slot attribute only after the slot tags have been rendered in the shadow DOM
385+
this._assignSlotsToChildren();
386+
385387
// onAfterRendering
386388
if (typeof this.onAfterRendering === "function") {
387389
this.onAfterRendering();
388390
}
389391
}
390392

393+
_assignSlotsToChildren() {
394+
const domChildren = Array.from(this.children);
395+
domChildren.filter(child => child._slot).forEach(child => {
396+
child.setAttribute("slot", child._slot);
397+
});
398+
}
399+
391400
_getTemplateContext() {
392401
return TemplateContext.calculate(this);
393402
}

0 commit comments

Comments
 (0)