Skip to content

Instantly share code, notes, and snippets.

@psygo

psygo/index.html

Last active October 25, 2020 19:43
Show Gist options
  • Save psygo/602f2c06b9125db8d4177180a79513c4 to your computer and use it in GitHub Desktop.
Save psygo/602f2c06b9125db8d4177180a79513c4 to your computer and use it in GitHub Desktop.
Download ZIP
Attempts at Creating Web Components
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>Web Component Dart Test</h1>
<script src="main.dart.js">
main();
</script>
<!-- <app-drawer></app-drawer> -->
</body>
</html>
Raw
interop.dart
@JS('window.customElements')
library web_components_interop;
import 'package:js/js.dart';
@JS('define')
external void registerWebComponent(String name, Object constructor, [Map<dynamic, dynamic> options]);
Raw
main.dart
import 'dart:html';
main() {
try {
// registerWebComponent(GraphButton.tag, GraphButton);
document.registerElement(GraphButton.tag, GraphButton);
// window.customElements.define('graph-button', GraphButton);
final GraphButton button = GraphButton();
document.body.append(button);
button.changeInnerHtml();
} catch (e, s) {
print(e);
print(s);
}
}
class GraphButton extends HtmlElement {
static const String tag = 'graph-button';
factory GraphButton() => Element.tag(GraphButton.tag);
GraphButton.created() : super.created();
changeInnerHtml() => innerHtml = 'foo';
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment