LitElements

web components-litElement

Github escuelaIt

• Curso litelement
• simple-environment-webpack-litelement
• firestore-litelement
• slide-components-litelement

WebComponents Google:

Lit-Element-polymer:

LitElement-Desarrolloweb:

Constructable-stylesheets

Componentes dile-xxxx

Extensiones útiles para Visual Code:

• Import Cost: muestra el tamaño de los imports
• lit-html: snippets para no teclear tanto
• Template Literal Editor: ayuda editar literal templates  

Comienzo proyecto: Básico. Después de modificación hay que ejecutar npm run build

• crear carpeta
• npm init
• npm install lit-element --save
• npm install -D webpack webpack-cli
npm i -D webpack-dev-server
• Modificar package.json
"scripts": {
"build": "webpack --mode production",
"builddev": "webpack --mode development",
"start": "webpack-dev-server --mode development --open"
}
• Crear carpeta src para 
• alojar los componentes.js
• crear index.js para importar los componentes alojados en 'src'
• Crear index.html 
• para utilizar los componenentes


• llamar a main.js de dist: <script src="./dist/main.js"></script>
• Abrir el  navegador: npm run start
• Después de cada modificación, para ver resultados: npm run build y refrescar la página del navegador

• 
  

---

Entorno de trabajo con Webpack simple y mejorado:  Simple y es el que utilizo por ahora

---

LitElement:

1-Crear, Usar, Implementar  Web Components con LitElement

2-Templates: binding, bucles, Light DOM, slots

3-Hojas de estilo, selector :host, estilos en slots, theming

4-Eventos: asociar maneadores, disparar y capturar

5-Ciclo de vida componentes

6-Composición

7-Producción y publicación

Notas:

• Light DOM: Es el contenido HTML en la etiqueta host de un componente ( Shadow-root )
• Interesante para SEO buscadores. Aunque no se visualice en el caso de que no interese, los buscadores pueden leerlo e indexar la información que haya. En este caso no utilizaremos "slot" en el componente
• Sólo se visualiza si en el componente utilizamos el "slot".

• Binding de propiedad: Poner siempre un "." delante. Sino se pone el punto solo funcionará si la propiedad es una cadena de caracteres. Si es por ejemplo, un objeto, no funcionará.
• <input type="text" .value="{this.value} " >

• Acceso desde un componente a un elemento del DOM del mismo: this.shadowRoot....
• ej: this.shadowRoot.getElementById('menu')

• Estilos
• Definición de estilos.
• La etiqueta <style> en el template
• Estilos aplicados en el template definido en el método render() por medio de la etiqueta <style>
• Propiedad static styles   Recomendada
• Estilos aplicados mediante una propiedad estática.
• Permite tener una definición de estilos única, que reutilizan todos los componentes de un tipo. Aumenta el rendimiento.
• Basada en  Constructable Stylesheets.
• contructable stylesheets
• Permite tener estilos compartidos: 
• Definimos archivos .js con estilos y los exportamos
• En el componente  importamos estos archivos de estilos
• Los especificamos en la property css del componente
• Ejemplo:
• En una hoja de estilos externa
• Desaconsejable
• En el atributo style de una etiqueta
• Desaconsejable 
• :host: Selector que aplica el estilo a la etiqueta "host" (la que envuelve al componente)
• :host { afecta a todo el componente }
• :host { display: block; border: 1px solid green }
• :host(.selector) { afecta a el host que aplique el selector
• :host(.red) { border-color: red } Afecta al/los "host" del componente con class="red".
• :host(.red) span { color: red } Afecta a todos los span del "host" de class="red". Ojo: el span tiene que estar en el "Shadow DOM". No afecta a los span del "Ligth DOM"
• :host([ hidden ]) { display:none } Afecta al/los "host" del componente con el atributo hidden
• Slot: Es el html que ponemos en la etiqueta del componente. Sirve para volcar el contenido del host de la etiqueta del componente como parte del template del componente. Es decir, permite usar el ligth DOM como parte del template del componente.
• 
  
• Ojo: el estilo definido en el html que incluye el componente manda sobre ::slotted {.... }
• ::slotted {...} solo funciona para los hijos directos.
• ::slotted {...} es bastante limitado
• Ejemplo slot:
• Estilos desde fuera del componente:
• Como los estilos de shadowDOM están encapsulados, no le afectan los estilos definidos fuera del componente. (en algunos navegadores pueden afectar)
• Lo que sí podemos hacer es definir en el html  un estilo a  la etiqueta del componente.
• Algunos atributos del html (ej: body)  penetran en los componenetes
•  font-family, font-size, color, background-color
• 
  
• Theming: Con variables css(custom properties) podemos conseguir el estilo de partes internas del componente
• En el css del html: body { --eit-icon-color: red }
• En el css  del html de la etiqueta del componente: card-box { --eit-icon-color: red }
• En el css del componente: path { fill: var(--eit-icon-color, transparent)} (transparent es el valor por defecto)
• Ejemplo svg:
• Material icons:
• Elegir el icono
• Descargarlo
• Pulsar enter para visualizar el icono
• Botón derecho y seleccionar: "Ver código fuente de la página".
• Añadirlo a un objeto: Ej: const icons = {  codigo icono-1 copiado, codigo icono-2 copiado, etc....}
• Técnica que utilizo en litElement
• Ejemplo: