Web components are a set of web platform APIs that allow you
to create new custom, reusable, encapsulated HTML tags to use
in web pages and web apps. Custom components and widgets build
on the Web Component standards, will work across modern
browsers, and can be used with any JavaScript library or
framework that works with HTML.
Web components are based on existing web standards. Features
to support web components are currently being added to the
HTML and DOM specs, letting web developers easily extend HTML
with new elements with encapsulated styling and custom behavior.
Note: Web components even work in React
projects.
First, create a project with the following structure and files.
src/build.ts
src/component.ink
package.json
src
build.ts
component.ink
package.json
import http from 'http';
import ink from '@stackpress/ink/compiler';
//create ink compiler
const compiler = ink({ cwd: __dirname });
//load component, and render
const component = compiler
.fromSource('./component.ink')
.component();
//save component
compiler.fs.writeFileSync('/path/to/component.js', component);
<style>
.title { text-align: center; }
</style>
<script>
const title = 'Hello';
</script>
<h1 class="title">{title}</h1>
{
"name": "my-project",
"version": "1.0.0",
"private": true,
"scripts": {
"build": "ts-node ./src/build.ts"
},
"dependencies": {
"@stackpress/ink": "0.3.24"
},
"devDependencies": {
"@stackpress/ink-dev": "0.3.24",
"@types/node": "22.1.0",
"ts-node": "10.9.2",
"typescript": "5.5.4"
}
}
To test the build script and see the results, run the
following command in terminal.
npm run build