Custom element

iam new to velo
i want to know how to use custom element any one can explain how to access custom element in main page

Custom elements are defined using the standard ECMAScript 2015 class syntax. You can put almost anything into a Custom Element. See these simple examples to get started:

For more complex examples, see the Wix Custom Element examples .

Review the custom element documentation and the API for more details.

Snow

${ text1 }

${ text2 }

${ text3 }

text only came but image is not load

Post your custom element code. the part you posted is not enough.
(Also what is jet-index?)

@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;
}
}

${ text1 }

${ text2 }

${ text3 }

` ; }

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

@subasskutti
Remove the and the , , and tags and their closing tags. You can’t have them inside a custom element.

1 Like

@jonatandor35 thank you bro