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 15:25] alfred [CSS] |
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 148: | Línea 153: | ||
| ===== How to... ===== | ===== 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? ==== | ==== ... treat slots inner content? ==== | ||