DART custom elements (Vanilla DART without Polymer) - dart

Question

I came through DART custom elements, from dartlang.org site, here and here.
If I understood correctly,this is a vanilla DART custom element, not related to Polymer custom tags.
I wrote the below code,
class CustomElement extends HtmlElement {
factory CustomElement() => new Element.tag('x-custom');
CustomElement.created() : super.created() {
print('CustomElement created!');
}
}
void main() {
document.registerElement('x-custom', CustomElement);
}
and got the "CustomElement created!" statement printed in the console, which means the element had been created!
my question is, what else? how can I use this customs element, and what can I do with it can I write HTML template, if yes, how?
I read this but unfortunately could not how to do same with DART.
any thoughts!

Answer 1

This is also used by Polymer. Polymer is just the combination of Custom Element, HTML Imports, Template, Polymer, Polyfills and some builerplate to connect these parts and provider a nice API.
If you want to reinvent the wheel you can go with CustomElement alone.
Change your main to
void main() {
document.registerElement('x-custom', CustomElement);
var elem = new Element.tag('x-element');
elem.appendText('x-element');
document.body.append(elem);
elem.onClick.listen((e) {
print('clicked');
});
}
and you can react to click events

Answer 2

I was ableto write the below, which had been worked, feel I did it the long way,
I could not use the tag
Not sure if the way I used to callback the elements in the custumElement in the correct way, as I was forced to use .append for all the items, and not sure if there is an easier way to do it.
my index.html file is
pick a color:<input type="color" name="colorname" id="colorname"> the color you selected is: <output id="picked-color"></output> click it !
<div id='my-element'></div>
my index.dart file is:
import 'dart:html';
class CustomElement extends HtmlElement {
factory CustomElement() => new Element.tag('x-custom');
CustomElement.created() : super.created() { }
Element launchElement(Element o1){
o1.onClick.listen((e) => window.alert('the input color is: ${o1.text}'));
print('CustomElement created!');
var output = new Element.html('<div></div>');
var statement = new Element.html('<div></div>');
var bind = new Element.html('<div></div>')
..text='this text will be dynamically replaced by what you are entering down';
var input = new InputElement()
..id ='input'
..type ='text'
..placeholder='enter data here';
input.onInput.listen((e) => bind.text=input.value);
var element = new Element.html('<span>content: </span>')
..style.color='red';
var button = new ButtonElement()
..id = 'awesome'
..classes.add('important')
..onClick.listen((e) => pop(input.value)) // "Hi There!!!")
..text = 'Click Me man!'
..style.color='orange';
statement.innerHtml="<b>I'm an x-custom-with-markup!</b> ";
output.node..add(statement)..add(bind)..add(input)..add(element)..add(button);
return (output);
}
var button1 = new ButtonElement()
..id = 'awesome2'
..text = 'External Click Me man!';
void pop(i){ window.alert("input is: $i"); }
}
void main() {
document.registerElement('x-custom', CustomElement);
var xFoo = new Element.tag('x-custom');
InputElement colorname = querySelector('#colorname');
Element theColor = querySelector('#picked-color');
xFoo = xFoo.launchElement(theColor);
theColor.text = colorname.value;
Element myDiv=querySelector('#my-element');
myDiv.children.add(xFoo);
colorname.onInput.listen((Event e) {
theColor.text = colorname.value;
});
}

Answer 3

Not available now
document.registerElement is deprecated: https://developer.mozilla.org/zh-CN/docs/Web/API/Document/registerElement
window.customElements.define with Dart is blocked by https://github.com/dart-lang/sdk/issues/35829