0
207
ViewsCómo obtener la selección de ventana para nodos anidados tiene shadow DOM
Si tenemos elementos anidados con shadow DOM e intentamos obtener una selección usando. ¿Hay alguna forma de obtener la correcta para cualquier selección que incluya casos como este? manifestación
window.getSelection() // incorrect selection window.getSelection().getRangeAt(0).getClientRects() // DOMRectList {length: 0} 
const main = document.querySelector('main'); const arr = "Lorem ipsum dolor sit, amet consectetur adipisicing elit. Laudantium, eaque!".split(' '); for (let i = 0; i < arr.length; i++) { const div = document.createElement('span'); const shadowRoot = div.attachShadow({ mode: 'open' }); shadowRoot.appendChild(document.createTextNode(arr[i] + " ")); main.appendChild(div); } const spans = [...document.querySelectorAll('.span-has-shadow')]; for (let i = 0; i < spans.length; i++) { const span = spans[i]; const text = span.dataset.text; const root = span.attachShadow({ mode: 'open' }); root.appendChild(document.createTextNode(text + " ")); if (i > 0) { const prev = spans[i - 1]; prev.shadowRoot.appendChild(span); } } main>* { font-size: 1.5em; font-family: cursive; } main { margin: auto; width: 1000px; } #shadow-root { color: blue; margin-top: 1em; } h2 { text-align: center; } <main></main> <h2> <span class="span-has-shadow" data-text="lorem"> <span class="span-has-shadow" data-text="ipsum"> <span class="span-has-shadow" data-text="dolor"> <span class="span-has-shadow" data-text="sit"> <span class="span-has-shadow" data-text="amet"> <span class="span-has-shadow" data-text="consectetur"> <span class="span-has-shadow" data-text="adipiscing"> <span class="span-has-shadow" data-text="elit"> </span> </span> </span> </span> </span> </span> </span> </span> </h2>
·
Juan Pablo Isaza
Answer question