template web component

A template for vanilla web components.

see also

• Web Component lifecycle methods
• How to detect when attributes change on a Web Component

use

1. Use the template button in github. Or clone this then rm -rf .git && git init. Then npm i && npm init.

• Use the template system to re-name this module and start the docs:

node ./bin/cli.js --package-name=@nichoth/example --component-name=my-component --gh-namespace nichoth --repo-name my-repo-name

The templates take several variables

• --gh-namespace -- first path segment on github
• --package-name -- package name, including any namespace. eg, @alice/package
• --component-name -- the name of the web component, as used in HTML, eg cool-example
• --repo-name -- repository name, the last segment in github URL, eg, github.com/user/repo-name-here

2. Edit the source code in src/index.ts.

3. Delete either .github/workflows/gh-pages-docs.yml or .github/workflows/gh-pages.yml, depending on whether you want to deploy an example or docs to github pages.

4. Edit things

   • edit the build-example command in package.json so that it has the right path for github pages

featuring

• compile the source to both ESM and CJS format, and put compiled files in dist.
• ignore dist and *.js in git, but don't ignore them in npm. That way we don't commit any compiled code to git, but it is available to consumers.
• use npm's prepublishOnly hook to compile the code before publishing to npm.
• use exports field in package.json to make sure the right format is used by consumers.
• preversion npm hook -- lint
• version npm hook -- generate a TOC for the README, and create and add a changelog
• postversion npm hook -- git push --follow-tags && npm publish
• eslint -- npm run lint
• tests run in a browser environment via tape-run -- see npm test. Includes tap testing tools -- tapzero and tap-spec
• CI via github actions
• stylelint -- see preversion npm hook

the component

See Web Component lifecycle methods.

attributeChangedCallback

runs whenever an attribute on the Web Component is added, removed, or changes in value.

For performance reasons, the attributeChangedCallback() method only watches and reacts to attributes you tell it to. To do that, you create a static observedAttributes property, with an array of attributes to watch as its value.

You can use any attributes you’d like, including non-standard ones.

disconnectedCallback