0
108
VistasElementos ranurados no agregados al componente web personalizado en iOS
Estoy desarrollando un componente web personalizado y cuando agrego opciones dentro a través de una etiqueta, no se procesan para los navegadores iOS.
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>También disponible en CodePen: https://codepen.io/agarcav/pen/oNEBZRg
Este ejemplo funciona en Chrome Desktop. Los elementos ranurados se agregan al componente web y lo expanden.
Captura de pantalla de Chrome Desktop: 
¿Hay alguna configuración necesaria en los navegadores Safari que me falta?
Lo busqué en Google pero no pude encontrar esto como un error documentado. Según Can I use el soporte es del 100%;
·
Juan Pablo Isaza
1 Respuestas
Responde la pregunta0
Resulta que el problema era que la etiqueta no se muestra en Safari si no está dentro de <select> , <optgroup> o <datalist> . Aunque está renderizado en Chrome y otros navegadores.
·
Juan Pablo Isaza
Denunciar
Responde la pregunta