Herramientas de usuario
wiki2:webcomponents
Diferencias
Muestra las diferencias entre dos versiones de la página.
| Ambos lados, revisión anterior Revisión previa Próxima revisión | Revisión previa | ||
|
wiki2:webcomponents [2020/06/01 10:49] alfred [Shadow DOM] |
wiki2:webcomponents [2021/05/08 07:32] (actual) |
||
|---|---|---|---|
| Línea 1: | Línea 1: | ||
| ====== Web Components ====== | ====== Web Components ====== | ||
| + | |||
| + | **Libraries**: | ||
| + | |||
| + | * [[wiki2:webcomponents:ficusjs]] | ||
| + | |||
| ===== Basic ===== | ===== Basic ===== | ||
| Línea 147: | Línea 152: | ||
| + | ===== How to... ===== | ||
| + | ==== ... define inline template? ==== | ||
| + | <code> | ||
| + | var template = document.createRange().createContextualFragment( ` | ||
| + | <style> | ||
| + | div {font-family: "Open Sans Light",Helvetica,Arial} | ||
| + | <div> | ||
| + | <slot name="attributes"></slot> | ||
| + | </div> | ||
| + | <hr> | ||
| + | `); | ||
| + | const shadowRoot = this.attachShadow({mode: 'open'}).appendChild(template.cloneNode(true)); | ||
| + | </code> | ||
| + | |||
| + | ==== ... treat slots inner content? ==== | ||
| + | <code> | ||
| + | <custom-menu id="menu"> | ||
| + | <span slot="title">Candy menu</span> | ||
| + | <li slot="item">Lollipop</li> | ||
| + | <li slot="item">Fruit Toast</li> | ||
| + | </custom-menu> | ||
| + | |||
| + | <script> | ||
| + | customElements.define('custom-menu', class extends HTMLElement { | ||
| + | items = [] | ||
| + | |||
| + | connectedCallback() { | ||
| + | this.attachShadow({mode: 'open'}); | ||
| + | this.shadowRoot.innerHTML = `<div class="menu"> | ||
| + | <slot name="title"></slot> | ||
| + | <ul><slot name="item"></slot></ul> | ||
| + | </div>`; | ||
| + | |||
| + | // slottable is added/removed/replaced | ||
| + | this.shadowRoot.firstElementChild.addEventListener('slotchange', e => { | ||
| + | let slot = e.target; | ||
| + | if (slot.name == 'item') { | ||
| + | this.items = slot.assignedElements().map(elem => elem.textContent); | ||
| + | alert("Items: " + this.items); | ||
| + | } | ||
| + | }); | ||
| + | } | ||
| + | }); | ||
| + | |||
| + | // items update after 1 second | ||
| + | setTimeout(() => { | ||
| + | menu.insertAdjacentHTML('beforeEnd', '<li slot="item">Cup Cake</li>') | ||
| + | }, 1000); | ||
| + | </script> | ||
| + | </code> | ||
wiki2/webcomponents.1591008572.txt.gz · Última modificación: 2020/06/01 11:49 (editor externo)
Herramientas de la página
Excepto donde se indique lo contrario, el contenido de este wiki esta bajo la siguiente licencia: CC Attribution-Noncommercial-Share Alike 4.0 International
