Component class

Marks a class as an island component that can be hydrated on the client.

Components are interactive elements within pages that get hydrated (become interactive) on the client side. They use Custom Elements and Declarative Shadow DOM for instant rendering.

Usage

@Component(tag: 'my-counter')
class Counter extends WebComponent {
  @override
  String get tagName => 'my-counter';

  static String render({int start = 0}) {
    return '''
      <my-counter start="$start">
        <template shadowrootmode="open">
          <button>Count: <span id="val">$start</span></button>
        </template>
      </my-counter>
    ''';
  }

  @override
  void onMount() {
    final btn = query('button')!;
    final val = query('#val')!;
    var count = propInt('start');

    btn.onClick.listen((_) {
      count++;
      val.text = count.toString();
    });
  }
}

The component will be automatically registered for hydration based on which pages use it.

Constructors

Component({required String tag})
Creates a component annotation with the given tag name.
const

Properties

hashCode → int
The hash code for this object.
no setterinherited
runtimeType → Type
A representation of the runtime type of the object.
no setterinherited
tag → String
The custom element tag name.
final

Methods

noSuchMethod(Invocation invocation) → dynamic
Invoked when a nonexistent method or property is accessed.
inherited
toString() → String
A string representation of this object.
inherited

Operators

operator ==(Object other) → bool
The equality operator.
inherited