WebComponent class abstract

Abstract base class for Spark components.

Components extend this class to create isomorphic web components that can be rendered on the server and hydrated on the browser.

Architecture

On the server (Dart VM):

Components render HTML strings via static render() methods
The element property is null
Lifecycle callbacks are not invoked

On the browser (JavaScript):

Components are hydrated by finding their elements in the DOM
The element property contains the actual DOM element
Lifecycle callbacks are invoked during hydration

Example

class Counter extends WebComponent {
  static const tag = 'my-counter';

  @override
  String get tagName => tag;

  // Server-side rendering
  static String render({int start = 0}) {
    return '''
      <$tag start="$start">
        <template shadowrootmode="open">
          <div>Count: <span id="val">$start</span></div>
          <button id="btn">+</button>
        </template>
      </$tag>
    ''';
  }

  // Client-side hydration
  @override
  void onMount() {
    final btn = query('#btn');
    btn?.onClick.listen((_) => print('Clicked!'));
  }
}

// In web/main.dart
void main() {
  hydrateComponents([Counter.new]);
}

Implementers

SparkComponent

Constructors

WebComponent()

Properties

element → HTMLElement: Gets the underlying DOM element.
no setter
hashCode → int: The hash code for this object.
no setterinherited
isHydrated → bool: Whether this component has been hydrated.
no setter
observedAttributes → List<String>: Returns a list of attribute names to observe for changes.
no setter
runtimeType → Type: A representation of the runtime type of the object.
no setterinherited
shadowRoot → ShadowRoot?: Gets the shadow root of this component.
no setter
tagName → String: The custom element tag name (e.g., 'my-counter').
no setter

Methods

adoptStyleSheets(List<String> cssTexts) → void: Applies CSS strings as adopted stylesheets to this component's shadow root.
attributeChangedCallback(String name, String? oldValue, String? newValue) → void: Called when an observed attribute changes.
hasAttr(String name) → bool: Checks if the element has the specified attribute.
noSuchMethod(Invocation invocation) → dynamic: Invoked when a nonexistent method or property is accessed.
inherited
onMount() → void: Called when the component is mounted/hydrated in the browser.
onUnmount() → void: Called when the component is unmounted from the DOM.
prop(String key, [String fallback = '']) → String: Reads an attribute value from the element.
propBool(String key, [bool fallback = false]) → bool: Reads a boolean attribute value.
propDouble(String key, [double fallback = 0.0]) → double: Reads a double attribute value.
propInt(String key, [int fallback = 0]) → int: Reads an integer attribute value.
query(String selector) → Element?: Queries for an element within this component's shadow root or element.
queryAll(String selector) → List<Element>: Queries for all matching elements within this component.
removeAttr(String name) → void: Removes an attribute from the element.
render() → Element: Renders the component as HTML.
setAttr(String name, String? value) → void: Sets an attribute on the element.
toggleAttr(String name, [bool? force]) → bool: Toggles a boolean attribute on the element.
toString() → String: A string representation of this object.
inherited

Operators

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