0
76
VisualizaçõesLos niños de Shadow dom no aparecieron en DOM
Mi objetivo allí es que quiero crear un DOM en la sombra en ID de prueba. Sin embargo, el problema de los hijos de mi sombra DOM no apareció en DOM
<body> <p> The application of braces moves the teeth as a result of force and pressure on the teeth. There are traditionally four basic elements used: brackets, bonding material, arch wire, and ligature elastic (also called an “O-ring”). The teeth move when the arch wire puts pressure on the brackets and teeth. Sometimes springs or rubber bands are used to put more force in a specific direction.[medical citation needed][1] Braces have constant pressure which, over time, move teeth into the desired positions. The process loosens the tooth after which new bone grows in to support the tooth in its new position. This is called bone remodeling. Bone remodeling is a biomechanical process responsible for making bones stronger in response to sustained load-bearing activity and weaker in the absence of carrying a load. Bones are made of cells called osteoclasts and osteoblasts. Two different kinds of bone resorption are possible: direct resorption, which starts from the lining cells of the alveolar bone, and indirect or retrograde resorption, which occurs when the periodontal ligament has been subjected to an excessive amount and duration of compressive stress.[2] Another important factor associated with tooth movement is bone deposition. Bone deposition occurs in the distracted periodontal ligament. Without bone deposition, the tooth will loosen, and voids will occur distal to the direction of tooth movement.[3] </p> <div id="test">Test</div>mi codigo javascript
let test = document.getElementById("test"); test.attachShadow({ mode: "open" }); let shadowHeader = document.createElement("p"); shadowHeader.className = "kit-header"; shadowHeader.innerText = "This is header"; let shadowBody = document.createElement("SPAN"); shadowBody.className = "kit-body"; test.appendChild(shadowHeader); test.appendChild(shadowBody); El resultado 
Como se puede ver en la imagen. no puedo ampliar el
#Shadowroot(Abrir)
·
Juan Pablo Isaza
1 Respostas
Responde à pergunta0
<div id="test">Test</div>
let test = document.getElementById("test"); test.attachShadow({ mode: "open" }); let shadowHeader = document.createElement("p"); shadowHeader.className = "kit-header"; shadowHeader.innerText = "This is header"; let shadowBody = document.createElement("SPAN"); shadowBody.className = "kit-body"; test.appendChild(shadowHeader); test.appendChild(shadowBody); Se agrega en test , no en shadowRoot dentro de test , esa referencia es: test.shadowRoot
... y los navegadores modernos tienen el método de append , para agregar múltiples elementos
<div id="test">Test</div> <script> let test = document.getElementById("test"); test.attachShadow({ mode: "open" }); let shadowHeader = document.createElement("p"); shadowHeader.className = "kit-header"; shadowHeader.innerText = "This is header"; let shadowBody = document.createElement("SPAN"); shadowBody.className = "kit-body"; shadowBody.innerText = "kit-body"; test.shadowRoot.append(shadowHeader,shadowBody); </script>Es posible que desee dar un paso más y convertirlo en un componente web adecuado:
<kit-card> <h1 slot="header">I am Kit</h1> </kit-card> <script> customElements.define("kit-card",class extends HTMLElement{ constructor(){ super().attachShadow({mode:"open"}) .innerHTML = `<style>p{font-size:20px}span{background:beige}</style> <p><slot name="header">This is header</slot></p> <span><slot name="body">kit-body</slot></span>` } }); </script>
·
Juan Pablo Isaza
Relatório
Responde à pergunta