Custom element

Ask the community
,
1

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

2

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.

3
Snow

${ text1 }

${ text2 }

${ text3 }

text only came but image is not load

1366×768 92.8 KB

4

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

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 );

6

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

7

@jonatandor35 thank you bro