HTML API

For a practical introduction to using these attributes, see the Components, Refs, and Options guides.

The following attributes can be used:

• data-component
• data-ref
• data-option

Customizing the attributes

Configure these attributes with the defineFeatures helper or createApp:

import { defineFeatures } from '@studiometa/js-toolkit';

defineFeatures({
  attributes: {
    component: 'tk-is',
    option: 'tk-opt',
    ref: 'tk-ref',
  },
});

Then update your HTML templates:

  <div
-   data-component="Component"
-   data-option-data="Hello world"
+   tk-is="Component"
+   tk-opt-data="Hello world">
    ...
-   <button data-ref="btn">
+   <button tk-ref="btn">
      Click me
    </button>
  </div>

Using prefixed HTML element names

js-toolkit also resolves components from a prefixed, dash-case element name in HTML.

- <div data-component="Component">
+ <tk-component>
    ...
- </div>
+ </tk-component>

Combine the attribute and element-name API to attach multiple components to a single element:

<tk-component data-component="Figure">...</tk-component>

The prefix defaults to tk. Configure it with the defineFeatures helper or createApp:

import { defineFeatures } from '@studiometa/js-toolkit';

defineFeatures({ prefix: 'w' });

- <tk-component>
+ <w-component>
    ...
- </tk-component>
+ </w-component>