0
208
Views¿Se puede ranurar un nodo de texto?
¿Es posible asignar un nodo de texto a una ranura cuando se usan <template> y <slot> s?
Digamos que tengo una plantilla que se parece a
<template> <span> <slot name="mySlot"></slot> </span> </template> Me gustaría poder agregar solo texto a la ranura, en lugar de tener que agregar una etiqueta de apertura y cierre <span> cada vez que uso la plantilla. es posible? Si no en HTML puro, ¿en JavaScript?
También es mejor pasar solo el contenido del texto para que no se aplique ningún estilo en el camino. Actualmente estoy usando una etiqueta no válida <n> para evitar ese problema.
·
Juan Pablo Isaza
1 answers
Answer question0
Claro, puede con la asignación de ranuras imperativa , pero aún no en Safari.
- No puede colocar un nodo de texto en una ranura con nombre (declarativo).
- No es posible mezclar slots declarativos e imperativos.
-
::slotted(*)no puede apuntar a nodos de texto.
<script> customElements.define("slotted-textnodes", class extends HTMLElement { constructor() { super().attachShadow({ mode: 'open', slotAssignment: 'manual' // imperative assign only }).innerHTML = `<style>::slotted(*){color:red}</style> Click me! <slot name="title"></slot> <slot>NONE</slot>!!!`; } connectedCallback() { let nodes = [], node; setTimeout(() => { // wait till lightDOM is parsed const nodeIterator = document.createNodeIterator( this, NodeFilter.SHOW_TEXT, { acceptNode: (node) => node.parentNode == this && (/\S/.test(node.data)) } ); while ((node = nodeIterator.nextNode())) nodes.push(node); this.onclick = (e) => { this.shadowRoot.querySelector("slot:not([name])").assign(nodes[0]); nodes.push(nodes.shift()); } }) } }) </script> <slotted-textnodes> Foo <hr separator>Bar<hr separator> <b>text INSIDE nodes ignored by iterator filter!</b> Baz <span slot="title">Can't mix Declarative and Imperative slots!!!</span> </slotted-textnodes>
·
Juan Pablo Isaza
Report
Answer question