4lib_component v0.0.21

4LibComponents

Use this lib for your project

To use this lib first install it by running:

npm i 4lib_component

Then use it in your HTML by adding in your HTML head:

<script type="module" src="/node_modules/4lib_component/src/components/an-element.ts"></script>

Or import it in your js/ts using:

import {MyElement} from '/node_modules/4lib_component/src/components/my-element';

Finally you can use it in your HTML with the element tag:

<my-element></my-element>

Edit this lib

You can test your elements with the index.html file and by running the server with the command:

yarn dev

A server will be launch on your localhost. Each modification of a file referenced in src/components.ts will launch a recompilation.

Compile this lib

Just run the following command :

npm run build

The compiled lib will be in a dist/ folder.

There will be two .js file, one for each module import style:

• es, for the ESM (EcmaScript Modules) module specification
• umd, for the UMD (Universal Modules) module specification

Each file is completely independant and contain the same code, just written in two different ways.

#Important notes to consider

Custom Elements Names

• Do not use standard names, like label (tricky one, because your element will not appear but no error will be thrown)

• Respect the html specification

Use 4Atoms

To use another lit-element in your template, just import its module for side-effect as followed.

import 'your/path/here'

Then, just use the lit-element tag.

import './general-kenobi.ts'
import {customElement} from 'lit-element';

@customElement("general-grievous")
export class GeneralGrievous extends LitElement {
    render: () => html`
        <h1>Hello there !</h1>
        <general-kenobi></general-kenobi>
    `
}