data-component
Bind a JavaScript class to an element with the data-component attribute in HTML.
Simple usage
js-toolkit finds and mounts components on elements matching [data-component="<Name>"] where <Name> corresponds to the component's config.name or the name passed to registerComponent.
js
import { registerComponent } from '@studiometa/js-toolkit';
import Component from './Component.js';
import OtherComponent from './OtherComponent.js';
registerComponent(Component);
registerComponent(OtherComponent, 'CustomName');html
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>App</title>
</head>
<body>
<div data-component="Component"></div>
<div data-component="CustomName"></div>
</body>
</html>Prefixed HTML elements
In addition to resolving components with the data-component attribute, js-toolkit looks for prefixed HTML elements (the default is tk-).
The previous HTML example can be rewritten to:
html
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>App</title>
</head>
<body>
<div data-component="Component"></div> // [!code --]
<div data-component="CustomName"></div> // [!code --]
<tk-component></tk-component> // [!code ++]
<tk-custom-name></tk-custom-name> // [!code ++]
</body>
</html>Multiple components on a single HTML element
Declare multiple components on a single HTML element by listing multiple names in the data-component attribute separated by a whitespace.
In the following example, js-toolkit mounts both components from the previous app on the same element.
html
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>App</title>
</head>
<body>
<div data-component="Component CustomName"></div>
<!-- Or with a prefixed element -->
<tk-component data-component="CustomName"></tk-component>
</body>
</html>