<mi-mensaje msj="Hola, soy un mensaje"></mi-mensaje>
<mi-mensaje casi-visible msj="Hola, soy un mensaje casi visible"></mi-mensaje>
mi-mensaje {
display: block;
padding: 10px;
border: 5px solid black;
}
mi-mensaje[casi-visible] {
border: none;
}
class MiMensaje extends HTMLElement {
// propiedad para escuchar solo los atributos
// definidos en el arreglo usando
// attributeChangedCallback
static get observedAttributes() {
return ['msj', 'casi-visible'];
}
//propieda 'msj' sincronizada con el atributo 'msj'
get msj() {
return this.getAttribute('msj');
}
set msj(msj) {
this.setAttribute('msj', msj);
}
//propieda 'casiVisible' sincronizada con el atributo 'casi-visible'
get casiVisible() {
return this.hasAttribute('casi-visible');
}
set casiVisible(value) {
if (value) {
this.setAttribute('casi-visible', '');
} else {
this.removeAttribute('casi-visible')
}
}
// Pintar el mensaje que se declara en el atributo 'msj'
pintarMensaje (msj) {
this.innerHTML = msj
}
// define la opacidad del elemento basado en la
// propiedad casiVisible
setCasiVisible () {
if (this.casiVisible) {
this.style.opacity = 0.1;
} else {
this.style.opacity = 1;
}
}
constructor () {
super();
this.addEventListener('click', function(e) {
alert(this.msj);
});
}
attributeChangedCallback (attrName, oldVal, newVal) {
if (attrName === 'msj') {
this.pintarMensaje(newVal);
}
if (attrName === 'casi-visible') {
this.setCasiVisible();
}
}
}
customElements.define('mi-mensaje', MiMensaje);
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.