Custom element

Ask the community
,
5

@jonatandor35 var text1 = ‘’ ;
var text2 = ‘’ ;
var text3 = ‘’ ;
var glow = ‘glow’ ;
var font = ‘a’ ;
var align = ‘right’ ;

class WixDefaultCustomElement extends HTMLElement {

**constructor** () { 
    **super** (); 

    console . log ( 'Constructor' ); 
} 

static  **get**  observedAttributes () { 
    **return**  [ 'text1' , 'text2' , 'text3' , 'glow' , 'font' , 'align' ]; 
} 
attributeChangedCallback ( name ,  oldValue ,  newValue ) { 
    console . log ( 'Attribute name: ' ,  name ,  'New value: ' ,  newValue ); 
    if  ( name  ===  'text1' ) { 
        text1  =  newValue ; 
        console . log ( text1 ); 
    } 
    if  ( name  ===  'text2' ) { 
        text2  =  newValue ; 
        console . log ( text2 ); 
    } 
    if  ( name  ===  'text3' ) { 
        text3  =  newValue ; 
        console . log ( text3 ); 
    } 
    if ( name  ===  'font' ){ 
      font = newValue ; 
    } 
    if ( name  ===  'glow' ){ 
      glow  =  newValue ; 
    } 
    if ( name  ===  'align' ){ 
      align  =  newValue ; 
    } 
    // called when one of attributes listed above is modified 
    //this.attachShadow({ mode: 'open' }); 
    **this** . innerHTML  =  ` 
  <!DOCTYPE html>
body { background-color: black; font-family: cursive; }

.glow {
font-size: 80px;
color: #fff;
animation: glow 1s ease-in-out infinite alternate;

}

.centered {
position: absolute;
top: 10%;
text-align: ${ align } ;
}
.centered1 {
position: absolute;
top: 15%;
text-align: ${ align } ;
}
.centered2 {
position: absolute;
top: 20%;
text-align: ${ align } ;
}

.p5 {
font-family: Dissolve;
src: url(https://static.wixstatic.com/ufonts/a0e9b2_431102f51da74984ad1cbe80fa148d93/woff2/file.woff2);
}

   .p4 { 
        font-family: Hometime; 
        src: url(https://static.wixstatic.com/ufonts/a0e9b2_95cb29f320be47c290a38f24d487c2c7/woff2/file.woff2); 
    } 
    
   .p3 { 
        font-family: Nixie One; 
        src: url(https://static.wixstatic.com/ufonts/142a69_2485280815664e4cbb49ec19a38fa320/woff2/file.woff2); 
    } 
    
   .p2 { 
        font-family: Loveletter; 
        src: url(https://static.wixstatic.com/ufonts/a0e9b2_8c625a2b36dd482ba150f2e3b02583c3/woff2/file.woff2); 
    } 
    
   .p1 { 
        font-family: Lovely; 
        src: url(https://static.wixstatic.com/ufonts/9ccc56_cb82eb63d1484415bb7a7fac2db8362f/woff/file.woff); 
    } 
    p.a {

font: 30px Arial, sans-serif;
}

p.b {
font: italic bold 30px/30px Georgia, serif;
}
@-webkit-keyframes glow {
from {
text-shadow:
0 0 7px #fff,
0 0 10px #fff,
0 0 21px #fff,
/* Green glow */
0 0 20px #ff4da6,
0 0 20px #ff4da6,
0 0 20px #ff4da6,
0 0 20px #ff4da6,
0 0 20px #ff4da6;
}

to {
text-shadow:
0 0 7px #fff,
0 0 10px #fff,
0 0 21px #fff,
/* Green glow */
0 0 20px #ff4da6,
0 0 20px #ff4da6,
0 0 20px #ff4da6,
0 0 20px #ff4da6,
0 0 20px #ff4da6;
}
}

Snow
Snow5000×5000 173 KB

${ text1 }

${ text2 }

${ text3 }

` ; }

}
customElements . define ( ‘wix-default-custom-element’ , WixDefaultCustomElement );