Since if we add internal variables associated to a new type of element, just a basic javascript type dom tree manipulation is not sufficient. dom to object invocation is required. this createShadowRoot mechanism looks useful feature indeed.
But ideally if Dart support nested class, I will define this MyElement (see below) as inner class of the Component class. Other approach is just to merge those features into single(MyElement) class, and this looks feasible way.
but if we want to use some of techniques using annotation for fields, we may need to define MirrorHtmlElement class as the subclass of HtmlElement, and 'component' class should inherit from it.
but there were some subtlety for the order of initialization, this approach need to be investigated further..
import 'dart:html';
void main() {
document.register('my-element', MyElement);
document.body.children.add(new Element.tag('my-element'));
}
class MyElement extends HtmlElement {
MyElement.created() : super.created() {
var shadowRoot = this.createShadowRoot();
var button = new ButtonElement()..text = '0';
var clickCount = 0;
button.onClick.listen((e) {
button.text = '${++clickCount}';
});
shadowRoot.children.add(button);
}
}
The HTML is nearly empty except the necessary script imports:
<!DOCTYPE html>
<html>
<body>
<script type="application/dart" src="custom.dart"></script>
<script src="packages/custom_element/custom-elements.debug.js"></script>
<script src="packages/browser/dart.js"></script>
</body>
</html>
