Quiz
L-E Normal
This quiz has a time limit, so it opens in the usual player.
Questions in this quiz (29)
1¿Con cuál opción la propiedad name obtendrá el valor undefined?
import { html, LitElement } from 'lit';
export class MyWebComponent extends LitElement {
static get properties() {
return {
name: {
type: String,
attribute: 'fullname'
}
};
}
}- A<my-webcomponent name="Some Name"></my-webcomponent>
- B<my-webcomponent .name="Some Name"></my-webcomponent>
- C<my-webcomponent fullname="Some Name"></my-webcomponent>
- D<my-webcomponent .fullname="Some Name"></my-webcomponent>
2Despues de 5 segundos ¿Cuál es el resultado de count?
import {html, LitElement} from 'Lit';
export class MyElement extends LitElement{
static get properties(){
return {
state:{type:Object}
};
}
constructor(){
super();
this.state = {seconds: 0};
this.interval = setInterval(() =>(this.state = {
seconds: this.state.seconds +1
}), 1000);
console.log(this.state.seconds);
};
render(){
return html `
<div>
count: ${this.state.seconds}
</div>
`;
}
}- ANo renderiza
- B5
- Cseconds:0
- D1000
3¿Qué es un slot?
- AEs un elemento HTML que nos permite definir marcadores de posición en tu pantalla que pueden rellenarse con cualquier fragmento de marcado cuando el elemento es usado
- BUna etiqueta
- CUn metodo de lit-element
4Este método es llamado solamente despues de que los componentes del DOM han sido actualizados por primera vez
- Arender
- BhasChanged
- CfirstUpdated
- DfirstUpdate
5Directiva que puede implementarse con Lit
- AifDefined
- Bif
- Cfor
- Ddo
6Si a una propiedad no se le especifica una función HasChanged ¿Cuál es la comparación?
- AnewValue !== oldValue
- BnewValue != oldValue
- ColdValue !== newValue
- DnewValue === oldValue
7¿Para qué sirve la opción de propiedad reflect?
- APara reflejar las propiedades como atributos y viceversa
- BPara reflejar el valor de la propiedad al componente padre
- CNo es una propiedad
- DPara agregar valor a una propiedad
8¿Qué nos permite hacer la función HTML?
- AInterpretar una template literal como un HTML
- BHTML no es una función
- CInsertar HTML a partir de JS
- Dinsertar Js en HTML
9¿Cuando es recomendable usar atributos en lugar de propiedades?
- ACuando se trabaje solo con la parte HTML del componente
- BCuando se trabaje con metodos
- CNo se recomienda usar
- DNo se pueden usar
10¿Cuál de los siguientes NO es un beneficio de trabajar con el ShadowDOM?
- AEncapsulation
- BComposition
- CDOM scoping
- DStyle scoping
11¿Qué es Lit?
- AUna libreria
- BUna clase
- CUn framework
- DUna función
12¿Con cuál o cuales de los siguientes casos de renderizado condicional no hay error ?
- Areturn html`${
this.cond ? html`<label> Condition true </label>` : nothing }` - Breturn html`${
this.cond ? html`<label> Condition true </label>` : null }` - Creturn html`${
this.cond ? html`<label> Condition true </label>` : ' ' }` - Dreturn html`${
this.cond ? html`<label> Condition true </label>` : 'empty }`
- Areturn html`${
13Este método es llamado cada vez que se asigna valor a una propiedad reactiva
- AhasChanged
- BhasChange
- Creflect
- Dconstructor
14En que sección del código se debe inicializar una propiedad
- Acontructor()
- Brender()
- Cproperties()
- Dconstructor()
15No son partes del ciclo de vida de lit element
- AshouldRender, requestUpdated,firstRender,FirstUpdate
- Brender, someProperty.hasChanged, requestUpdate
- CperformUpdate, updateCompleted, firstUpdated
- DshouldUpdate, update, updated
16¿Cuál es el resultado del Array color?
import {LitElement, html} from 'list';
class MyElement extends LitElement {
static properties = {
colors: {type: Array},
};
constructor() {
super();
this.colors=['Rojo','Verde','Negro','Azul'];
}
render() {
return html`
<ul>
${this.colors.map((color) => html `
<li style=""color:${color}""> ${color} </li>`)}
</ul>
`;}
}
customElements.define('my-element',MyElement);- ARojo, Verde, Negro, Azul
- BRojo, Verde, Azul, Negro
- CRed, Green, Blue, Black
- DRojo, Verde, Negro, Azul (En su respectivo color)
17¿Cuál es el ciclo de vida de un componente en su primer renderizado?
- Aconstructor->connectedCallback->update->render->updated->firstUpdated
- Bupdate->render->updated->firstUpdated->constructor->connectedCallback-
- Cconstructor->connectedCallback->render->updated->firstUpdated
- Dconstructor->connectedCallback->updated->render->update->firstUpdate
18Para el siguiente componente, cuál de las opciones de hacer Binding genera un error ?
import { html, LitElement } from 'lit';
export class MyComponent extends LitElement {
static get properties() {
return {
persons: { type: Array }
};
}
}- A<my-webcomponent persons=${JSON.parse(['Ana', 'Juan'])}'></my-webcomponent>
- B<my-webcomponent persons=${[['Ana'], ['Juan']]}'></my-webcomponent>
- C<my-webcomponent persons=${['Ana', 'Juan']}'></my-webcomponent>
- D<my-webcomponent persons=${(['Ana', 'Juan'])}'></my-webcomponent>
19Dado el siguiente componente
¿Qué se mostrará en el elemento <h2> después de hacer click en el botón?
import { LitElement, html } from ""lit"";
class MyWebcomponent extends LitElement {
static get properties() {
return {
object: { type: Object },
};
}
constructor() {
super();
this.object = { myProp: ""Initial value"" };
}
handleClick() {
this.object.myProp = ""New value"";
}
render() {
return html`<h2>${this.object.myProp}</h2>
<button @click=${this.handleClick}>Click Me!</button> `;
}
}- AInitial value
- BInit value
- CNew value
- DOld value
20Para el siguiente componente ¿Cuál de los opciones es la correcta para hacer el binding?
import {html,LitElement} from 'lit';
export class MyWebcomponent extends LitElement{
static get properties(){
return{
person:{ type: Object}
}
}
}- A<my-webcomponent .person=${JSON.parse('{"name": "Pedro", "age": 25}')}></my-webcomponent>
- B<my-webcomponent person=${JSON.parse('{"name": "Pedro", "age": 25}')}></my-webcomponent>
- C<my-webcomponent .person=${JSON.('{"name": "Pedro", "age": 25}')}></my-webcomponent>
- D<my-webcomponent .person=${('{"name": "Pedro", "age": 25}')}></my-webcomponent>
21Si se requiere reordenar una lista grande o modificarla ya sea agregando o quitando elementos ¿Qué se recomienda usar?
- Amap()
- Bfor
- CforEach()
- Dwhile
22list =['Peas','Carrots','Tomatoes'];
¿Cuál debe ser la instrucción correcta para pintar?
0:Peas
1:Carrots
2:Tomatoes- A${this.list.map((item, index)=> html ́<li>${index}: ${item}</li> ́)}
- B${this.list.map((item, index)=> html ́<li>${item}</li> ́)}
- C${this.list((item, index)=> html ́<li>${index}: ${item}</li> ́)}
- D${this.list.map((item)=> html ́<li>${index}: ${item}</li> ́)}
23Notifica el cambio de una propiedad
- ArequestUpdate()
- BrequestUpdated()
- Cupdate
- Dupdated
24Diferencia entre Updated y UpdateComplete
- Aupdated: Ejecuta tareas posteriores a un cambio
updateComplete: Solo informa del cambio - Bupdated: Solo informa el cambio
updateComplete: Ejecuta tareas posteriores a un cambio - Cupdated: Realiza el cambio
updateComplete: Solo informa del cambio - Dupdated: Ejecuta tareas posteriores a un cambio
updateComplete: Informa el cambio y realiza tareas posteriores
- Aupdated: Ejecuta tareas posteriores a un cambio
25Función attribute en propiedades
- AModificar o bloquear el atributo con el que se accede a la propiedad
- BRestringir el uso de la propiedad
- CCambia el valor de las propiedades
- DOrganiza las propiedades por sus atributos
26¿Cuál es la manera en que podemos escuchar un evento click del siguiente componente?
- A<bbva-header-main @click = ${()=> this.myMethod}></bbva-header-main>
- B<bbva-header-main @click = {()=> this.myMethod}></bbva-header-main>
- C<bbva-header-main @click = ${()=> myMethod}></bbva-header-main>
- D<bbva-header-main @click = ${=> this.Method}></bbva-header-main>
27"¿Cuál de las opciones de la propiedad name obtendrá el valor ""Some Name""?
import {html, LitElement} from 'lit';
export class MyWebcomponent extends LitElement {
static get properties(){
return{
name:{
type:String,
attibute: 'fullname'
}
};
}
render(){
return html`
<p> ${this.name}</p>
`;
}
}
customElements.define('my-webcomponent', MyWebcomponent);"- A<my-webcomponent fullname="Some Name"></my-webcomponent>
- B<my-webcomponent .name="Some Name"></my-webcomponent>
- C<my-webcomponent name="Some Name"></my-webcomponent>
- D<my-webcomponent .fullname="Some Name"></my-webcomponent>
28¿En que sección del código se declara una
propiedad?- Aproperties
- Bconstructor
- Csuper
- Drender
29¿Cuál es el ciclo de vida de un componente despues de su primer renderizado?
- Aupdate->render->updated
- Bupdated->render->updated
- Cupdated->render->update
- Drender->update->updated
Information
- Description
- Otro Exam Quiz on L-E Normal, created by Nelly Santiago Morales on 02/09/2022.
- Author
- Nelly Santiago Morales
- Language
- English
- Views
- 95
- History
- Created on 2 Sep 2022 · updated on 2 Sep 2022
- Tags
- Rating
- No ratings yet Rate this quiz