0
105
ViewsSlotted elements not added to Custom Web Component in iOS
I'm developing a custom web component and when I add options inside via tag, those are not rendered for iOS browsers.
const template = document.createElement('template');
template.innerHTML = `
<style>
.my-wrapper {
height: auto;
background: #eee;
}
</style>
<div class="my-wrapper">
<slot name="my-slot"></slot>
</div>
`;
class MyComponent extends HTMLElement {
constructor() {
super()
.attachShadow({mode:"open"})
.appendChild(template.content.cloneNode(true));
}
}
window.customElements.define('my-component', MyComponent);<my-component>
<option slot="my-slot">A</option>
<option slot="my-slot">B</option>
<option slot="my-slot">C</option>
<option slot="my-slot">D</option>
</my-component>Also available in CodePen: https://codepen.io/agarcav/pen/oNEBZRg
This example works in Chrome Desktop. The slotted elements are added to the web component and they expand it.
Screenshot from Chrome Desktop:
Is there any needed config in Safari browsers I am missing?
I've googled it but I couldn't find this as a documented bug. According to Can I use the support is 100%;
·
Juan Pablo Isaza
1 answers
Answer question0
It turns out the problem was the tag is not rendered in Safari if it's not inside <select>, <optgroup> or <datalist>. Although it's rendered in Chrome and other browsers.
·
Juan Pablo Isaza
Report
Answer question