ayo/status-indicator
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: set up status-indicator compontnt

Browse source
This commit is contained in:
ayo 2026-05-08 13:25:14 +02:00
parent 34cd917871
commit fee257cd15
3 changed files with 7 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
index.html
View file

@ -4,9 +4,9 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Web Component Demo</title> <title>Web Component Demo</title>
<script type="module" src="./hello-world.ts"></script> <script type="module" src="./src/status-indicator.ts"></script>
</head> </head>
<body> <body>
<hello-world></hello-world> <status-indicator></status-indicator>
</body> </body>
</html> </html>

1
package.json
View file

@ -9,6 +9,7 @@
"main": "index.js", "main": "index.js",
"scripts": { "scripts": {
"test": "echo \"Warning: no test specified\"", "test": "echo \"Warning: no test specified\"",
"build": "vite build",
"dev": "vite", "dev": "vite",
"prepare": "husky" "prepare": "husky"
}, },

4
hello-world.ts → src/status-indicator.ts
View file

@ -1,9 +1,11 @@
import { WebComponent, html } from 'web-component-base' import { WebComponent, html } from 'web-component-base'
class HelloWorld extends WebComponent { class StatusIndicator extends WebComponent {
get template(): any { get template(): any {
return html` return html`
<h1>Hello, World!</h1> <h1>Hello, World!</h1>
` `
} }
} }
customElements.define('status-indicator', StatusIndicator)