https://github.com/rodydavis/dart-web-components
Dart + Web Components
https://github.com/rodydavis/dart-web-components
dart flutter html js signals wasm web
Last synced: 8 months ago
JSON representation
Dart + Web Components
- Host: GitHub
- URL: https://github.com/rodydavis/dart-web-components
- Owner: rodydavis
- License: apache-2.0
- Created: 2025-02-04T19:42:34.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-02-14T07:51:48.000Z (over 1 year ago)
- Last Synced: 2025-02-14T08:33:22.546Z (over 1 year ago)
- Topics: dart, flutter, html, js, signals, wasm, web
- Language: Dart
- Homepage: https://rodydavis.github.io/dart-web-components/
- Size: 699 KB
- Stars: 16
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Dart Web Components
How to create [web components](https://developer.mozilla.org/en-US/docs/Web/API/Web_components) with Dart that compile to WASM and JS.
You can use them in any framework or library that supports HTML.
> Disclaimer: This is not an official Google project.
## Getting Started
### 1. Extend the WebComponent class
```dart
import 'package:html_web_components/html_web_components.dart';
class MyComponent extends WebComponent {
...
}
```
### 2. Define the component
Use the connectedCallback to define the component setup logic instead of the constructor.
```dart
import 'package:html_web_components/html_web_components.dart';
class MyComponent extends WebComponent {
@override
void connectedCallback() {
element.innerText = "Hello World!";
}
}
```
### 3. Register the component
```dart
import 'package:html_web_components/html_web_components.dart';
...
void main() {
WebComponent.define('my-component', MyComponent.new);
}
```
## Mixins
There are some helper mixins to make it easier to work with web components.
### WebComponentCleanupMixin
This mixin adds an array of callbacks that will be disposed when the component is disconnected.
```dart
import 'package:html_web_components/html_web_components.dart';
import 'package:html_web_components/helpers.dart';
class MyComponent extends WebComponent with WebComponentCleanupMixin {
@override
void connectedCallback() {
this.cleanup.add(() => print('cleaned up!'));
}
}
```
### WebComponentShadowDomMixin
This mixin adds a shadow root to the component.
```dart
import 'package:html_web_components/html_web_components.dart';
import 'package:html_web_components/helpers.dart';
class MyComponent extends WebComponent with WebComponentShadowDomMixin {
@override
void connectedCallback() {
getRoot().innerHtml = '
Hello World
';
}
}
```
### WebComponentAdoptedStylesMixin
This mixin adds adopted styles to the component. This only works with the shadow dom.
```dart
import 'package:html_web_components/html_web_components.dart';
import 'package:html_web_components/helpers.dart';
import 'package:signals_core/signals_core.dart';
class MyComponent extends WebComponent with WebComponentShadowDomMixin, WebComponentAdoptedStylesMixin {
@override
final sheets = computed>(() {
final sheet = CSSStyleSheet();
sheet.replaceSync('h1 { color: red; }');
return [sheet];
});
@override
void connectedCallback() {
getRoot().innerHtml = '
Hello World
';
}
}
```
### WebComponentReactiveAttributesMixin
This mixin adds reactive attributes to the component.
```dart
import 'package:html_web_components/html_web_components.dart';
import 'package:html_web_components/helpers.dart';
import 'package:signals_core/signals_core.dart';
class MyComponent extends WebComponent with WebComponentReactiveAttributesMixin {
@override
List observedAttributes = ['name'];
final src = attr('name');
@override
void connectedCallback() {
cleanup.add(effect((){
element.innerHtml = '
Hello $src
';
}));
}
}
```
## Links
- [Web Components](https://developer.mozilla.org/en-US/docs/Web/Web_Components)
- [Are web components used a lot?](https://arewebcomponentsathingyet.com)
- [Dart Web Components](https://github.com/dart-archive/web-components)