Make a hypothetical package:html

lib/html.dart

@@ -0,0 +1,4 @@
+export 'src/custom_element.dart';
+export 'src/div_element.dart';
+export 'src/element.dart';
+export 'src/html_element.dart';

lib/interop.js

@@ -0,0 +1,30 @@
+class CustomElement extends HTMLElement {
+  constructor() { 
+    super(); 
+    this.dartObject = null;
+  }
+
+  connectedCallback() {
+    this.dartObject.connected();
+  }
+
+  disconnectedCallback() {
+    this.dartObject.disconnected();
+  }
+
+  attributeChangedCallback(attr, oldVal, newVal) {
+    this.dartObject.attributeChanged(attr, oldVal, newVal);
+  }
+}
+window.CustomElement = CustomElement;
+
+function defineElement(name, construct, observed) {
+  customElements.define(name, class extends CustomElement {
+    constructor() {
+      super();
+      construct(this);
+    }
+
+    static get observedAttributes() { return observed; }
+  });
+};

lib/src/custom_element.dart

@@ -0,0 +1,22 @@
+import 'html_element.dart';
+import 'js.dart' as js;
+
+typedef CustomElementConstructor = CustomElement Function(
+    js.CustomElement element);
+
+class CustomElement extends HtmlElement {
+  CustomElement(js.HtmlElement element) : super(element);
+
+  void connected() {}
+  void disconnected() {}
+  void attributeChanged(String attribute, String oldValue, String newValue) {}
+
+  // Register
+  static void register(
+    String tag,
+    CustomElementConstructor constructor, [
+    List<String> observed = const <String>[],
+  ]) {
+    js.defineElement(tag, constructor, observed);
+  }
+}

lib/src/div_element.dart

@@ -0,0 +1,7 @@
+import 'js.dart' as js;
+
+import 'html_element.dart';
+
+class DivElement extends HtmlElement {
+  DivElement(js.HtmlElement element) : super(element);
+}

lib/src/element.dart

@@ -0,0 +1,27 @@
+import 'package:meta/meta.dart';
+
+import 'div_element.dart';
+import 'js.dart' as js;
+
+abstract class Element<T extends js.Element> {
+  ///
+  @protected
+  Element(this.jsObject) {
+    jsObject.dartObject = this;
+  }
+
+  @protected
+  final T jsObject;
+}
+
+DivElement div() => tagName('div') as DivElement;
+
+Element tagName(String tag) {
+  final jsElement = js.document.createElement(tag);
+
+  if (tag == 'div') {
+    return DivElement(jsElement);
+  }
+
+  return null;
+}

lib/src/html_element.dart

@@ -0,0 +1,26 @@
+import 'element.dart';
+import 'js.dart' as js;
+
+abstract class HtmlElement<T extends js.HtmlElement> extends Element<T> {
+  HtmlElement(T jsObject) : super(jsObject);
+
+  void click() {
+    print('Im clicking');
+    jsObject.click();
+  }
+
+  void focus() {
+    print('Im focusing');
+    jsObject.focus();
+  }
+
+  void blur() {
+    print('Im bluring');
+    jsObject.blur();
+  }
+
+  String get text => jsObject.innerText;
+  set text(String value) {
+    jsObject.innerText = value;
+  }
+}

lib/src/js.dart

@@ -0,0 +1,5 @@
+export 'js/custom_element.dart';
+export 'js/dart_wrapper.dart';
+export 'js/document.dart';
+export 'js/element.dart';
+export 'js/html_element.dart';

lib/src/js/custom_element.dart

@@ -0,0 +1,13 @@
+@JS()
+library html_proto.src.js.custom_element;
+
+import 'package:js/js.dart';
+
+import 'html_element.dart';
+
+@JS('CustomElement')
+abstract class CustomElement implements HtmlElement {}
+
+@JS('defineElement')
+external void defineElement(
+    String name, Function constructor, List<String> observed);

lib/src/js/dart_wrapper.dart

@@ -0,0 +1,5 @@
+/// A JSObject that contains a Dart object.
+abstract class DartWrapper {
+  /// The object from Dart.
+  dynamic dartObject;
+}

lib/src/js/document.dart

@@ -0,0 +1,14 @@
+@JS()
+library html_proto.src.js.document;
+
+import 'package:js/js.dart';
+
+import 'html_element.dart';
+
+@JS('Document')
+abstract class Document {
+  HtmlElement createElement(String tag);
+}
+
+@JS('document')
+external Document get document;

lib/src/js/element.dart

@@ -0,0 +1,9 @@
+@JS()
+library html_proto.src.js.element;
+
+import 'package:js/js.dart';
+
+import 'dart_wrapper.dart';
+
+@JS('Element')
+abstract class Element implements DartWrapper {}

lib/src/js/html_element.dart

@@ -0,0 +1,16 @@
+@JS()
+library html_proto.src.js.html_element;
+
+import 'package:js/js.dart';
+
+import 'element.dart';
+
+@JS('HTMLElement')
+abstract class HtmlElement implements Element {
+  void click();
+  void focus();
+  void blur();
+
+  String get innerText;
+  set innerText(String value);
+}

pubspec.yaml

@@ -1,5 +1,5 @@
-name: customElementDemo
-description: An absolute bare-bones web app.
+name: html_proto
+description: Alternate dart:html prototype.
 # version: 1.0.0
 #homepage: https://www.example.com
 #author: Jenny Messerly <[email protected]>
@@ -9,6 +9,7 @@ environment:
 
 dependencies:
   js: ^0.6.0
+  meta: ^1.1.6
 
 dev_dependencies:
   build_runner: ^0.10.0

web/index.html

@@ -5,12 +5,13 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta name="scaffolded-by" content="https://github.com/google/stagehand">
-    <title>customElementDemo</title>
+    <title>HTML Prototype Demo</title>
     <link rel="stylesheet" href="styles.css">
     <link rel="icon" href="favicon.ico">
-    <script defer src="interop.js"></script>
+    <script defer src="packages/html_proto/interop.js"></script>
     <script defer src="main.dart.js"></script>
 </head>
 <body>
+    <greeting-element></greeting-element>
 </body>
 </html>

web/main.dart

@@ -1,55 +1,27 @@
-@JS()
-library main;
+import 'package:html_proto/html.dart';
+import 'package:html_proto/src/js.dart' as js;
 
-import 'dart:html';
-import 'package:js/js.dart';
+class GreetingElement extends CustomElement {
+  GreetingElement(js.CustomElement element) : super(element);
 
-@JS('CustomElement')
-abstract class JSCustomElement<T extends CustomElement> implements HtmlElement {
-  T asDart;
-}
-
-typedef CustomElementConstructor = CustomElement Function(JSCustomElement e);
-
-@JS('defineElement')
-external void defineElement(String name, CustomElementConstructor constructor);
-
-class CustomElement {
-  final JSCustomElement element;
-
-  CustomElement(this.element) {
-    element.asDart = this;
+  void connected() {
+    print('Hello I\'m connected now');
+    text = 'Hello from Dart';
   }
 
-  void connected() {}
-  void disconnected() {}
-}
-
-class HelloElement extends CustomElement{
-  HelloElement(JSCustomElement element) : super(element);
-
-  void sayHello() {
-    element.text = 'Hello from Dart!';
-    element.style.color = '#0175C2';
+  void disconnected() {
+    print('Goodbye I\'m being disconnected now');
   }
-}
 
-class GoodbyeElement extends CustomElement {
-  GoodbyeElement(JSCustomElement element) : super(element);
+  void attributeChanged(String attribute, String oldValue, String newValue) {
+    text = 'Hello from Dart ${newValue}';
 
-  void sayGoodybe() {
-    element.text = 'Goodbye from Dart!';
-    element.style.color = '#0175C2';
+    print('Attribute: $attribute');
+    print('Old value: $oldValue');
+    print('New value: $newValue');
   }
 }
 
 void main() {
-  defineElement('dart-goodbye', allowInterop((e) => GoodbyeElement(e)));
-  defineElement('dart-hello', allowInterop((e) => HelloElement(e)));
-
-  var hello = document.body.append(Element.tag('dart-hello')) as JSCustomElement<HelloElement>;
-  hello.asDart.sayHello();
-
-  var goodbye = document.body.append(Element.tag('dart-goodbye')) as JSCustomElement<GoodbyeElement>;
-  goodbye.asDart.sayGoodybe();
+  CustomElement.register('greeting-element', (e) => GreetingElement(e), ['name']);
 }