Defining a Component

Define a Jwc component by creating a class that extends JwcComponent or a function that returns a JSX Element.

Class BasedFunction Based Not yet implemented

tsx

@Component({ name: "app-element" })
export class App extends JwcComponent {
  /* ... */
}

// no yet implemented

Class Based

The @Component decorator is used to define a Jwc component. It takes an object with the following properties:

name - The name of the component. This is used to identify the component in the DOM. It must be unique.
css - The CSS to be applied to the component. The CSS is applied to the shadow DOM of the component.
options - The options to be passed to the component. Follows the ElementDefinitionOptions interface from the Custom Elements API.

I recommend you do not use JavaScript to define your component. Instead, use TypeScript. This will allow you to use the @Component decorator to define your component.

But if you do use JavaScript or you want to define without using the decorator:

  const options = { 
    name: "app-element", 
    /* ... */
  }; 

  @Component({ name: "app-element" /* ... */ }) 
export class App extends JwcComponent {
  constructor() {
    super();
    // inject options into the component
    this.$options.options = options; 
    /* ... */
  }
  /* ... */
}
  customElements.define("app-element", App, options.options);

Make sure to inject the options into the component. This is required for the component to work properly.

/* ... */
export class App extends JwcComponent {
  constructor() {
    super();
    // MAKE SURE: inject options into the component
    this.$options.options = options; 
    /* ... */
  }
  /* ... */
}
/* ... */

WARNING

Although you can define a component without using the @Component decorator, it is not recommended. We won't use that in our documentation.

Function Based Not yet implemented

Not yet implemented.

Defining a Component #

Class Based #

Function Based Not yet implemented #

Defining a Component

Class Based

Function Based Not yet implemented