Best practice

For applications

A1. Always include element metadata from libraries if present

Why: when using IDE plugins you get help using the library right in the editor.

Why: easier upgrade paths when the validation will help find bugs and deprecations.

Why: the library may include custom rules to prevent invalid usage.

A2. Write element metadata for all custom components

Why: To get full benefits of the validator all custom elements must include metadata.

For libraries

L1. Bundle element metadata in the same package

Always bundle the element metadata in the same package as your library.

Why: this way the metadata is always in sync with the actual components and the end-user does not have to install a separate package.

How: include all element metadata in the same repository as your library and make sure the files are included when publishing package (e.g. ensure they are present in package.json files property)

L2. Wrap in plugin with configuration preset

Always wrap the metadata in a plugin exposing a recommended configuration.

The end-user would then use the library with something similar to this without knowing much about where your files lives:

  "plugins": ["my-library/htmlvalidate"],
  "extends": ["html-validate:recommended", "my-library:recommended"]

Why: it is easier for the end-user to use it as they don't need to keep track of how it is supposed to be used.

Why: files can be moved around easier as long as the plugin is intact.

Why: seamless for end-users if you later decide to add custom rules, recommended rules, etc.

How: create a plugin folder (preferably named htmlvalidate) in your repository with an index.js file implementing the Plugin API. See documentation for writing plugins.

L3. Include metadata for all elements

No matter how insignificant always include element metadata for all components.

Why: without any metadata the element is silently ignored and can cause similar unnoticed errors for other elements. Consider if A > B is disallowed but with an unknown C between A > C > B no errors will be yielded as it is not known if C can be content of A or if it can be the parent of B.

Why: it makes you think about intended semantics of your components.

Why: makes deprecations easier.

How: Use no-unknown-elements rule to find elements you have not yet provided metadata for.

L4. Use deprecations

If you ever find yourself removing an element or attribute mark it as deprecated.

Why: end-users get errors about using deprecated elements and attributes making it easier to migrate.

Why: a properly configured CI pipeline would fail the build.

How: deprecate elements using the deprecated property.

How: deprecate attributes using the deprecatedAttributes property.

L5. Write unit-tests

Consider the metadata as part of your deliverable and thus you should write tests to ensure it always works as expected.

How: See writing tests for details how to write unit tests.