customElementDemo

├── CHANGELOG.md ├── README.md ├── web ├── favicon.ico ├── styles.css ├── interop.js ├── index.html └── main.dart ├── .gitignore ├── pubspec.yaml ├── analysis_options.yaml └── LICENSE /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | ## 1.0.0 2 | 3 | - Initial version, created by Stagehand 4 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | Example of a custom element written in Dart, using JS interop for registration. 2 | -------------------------------------------------------------------------------- /web/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jmesserly/dart-custom-element-demo/HEAD/web/favicon.ico -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Files and directories created by pub 2 | .dart_tool/ 3 | .packages 4 | # Remove the following pattern if you wish to check in your lock file 5 | pubspec.lock 6 | 7 | # Conventional directory for build outputs 8 | build/ 9 | 10 | # Directory created by dartdoc 11 | doc/api/ 12 | -------------------------------------------------------------------------------- /web/styles.css: -------------------------------------------------------------------------------- 1 | @import url(https://fonts.googleapis.com/css?family=Roboto); 2 | 3 | html, body { 4 | width: 100%; 5 | height: 100%; 6 | margin: 0; 7 | padding: 0; 8 | font-family: 'Roboto', sans-serif; 9 | } 10 | 11 | #output { 12 | padding: 20px; 13 | text-align: center; 14 | } 15 | -------------------------------------------------------------------------------- /pubspec.yaml: -------------------------------------------------------------------------------- 1 | name: customElementDemo 2 | description: An absolute bare-bones web app. 3 | # version: 1.0.0 4 | #homepage: https://www.example.com 5 | #author: Jenny Messerly 6 | 7 | environment: 8 | sdk: '>=2.0.0 <3.0.0' 9 | 10 | dependencies: 11 | js: ^0.6.0 12 | 13 | dev_dependencies: 14 | build_runner: ^0.10.0 15 | build_web_compilers: ^0.4.0 16 | -------------------------------------------------------------------------------- /analysis_options.yaml: -------------------------------------------------------------------------------- 1 | analyzer: 2 | # exclude: 3 | # - path/to/excluded/files/** 4 | 5 | # Lint rules and documentation, see http://dart-lang.github.io/linter/lints 6 | linter: 7 | rules: 8 | - cancel_subscriptions 9 | - hash_and_equals 10 | - iterable_contains_unrelated_type 11 | - list_remove_unrelated_type 12 | - test_types_in_equals 13 | - unrelated_type_equality_checks 14 | - valid_regexps 15 | -------------------------------------------------------------------------------- /web/interop.js: -------------------------------------------------------------------------------- 1 | class CustomElement extends HTMLElement { 2 | constructor() { 3 | super(); 4 | this.asDart = null; 5 | } 6 | 7 | connectedCallback() { 8 | this.asDart.connected(); 9 | } 10 | 11 | disconnectedCallback() { 12 | this.asDart.disconnected(); 13 | } 14 | } 15 | window.CustomElement = CustomElement; 16 | 17 | function defineElement(name, construct) { 18 | customElements.define(name, class extends CustomElement { 19 | constructor() { 20 | super(); 21 | construct(this); 22 | } 23 | }); 24 | }; 25 | -------------------------------------------------------------------------------- /web/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | customElementDemo 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License 2 | 3 | Copyright (c) 2018 Google, Inc. 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in 13 | all copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 21 | THE SOFTWARE. 22 | -------------------------------------------------------------------------------- /web/main.dart: -------------------------------------------------------------------------------- 1 | @JS() 2 | library main; 3 | 4 | import 'dart:html'; 5 | import 'package:js/js.dart'; 6 | 7 | @JS('CustomElement') 8 | abstract class JSCustomElement implements HtmlElement { 9 | T asDart; 10 | } 11 | 12 | typedef CustomElementConstructor = CustomElement Function(JSCustomElement e); 13 | 14 | @JS('defineElement') 15 | external void defineElement(String name, CustomElementConstructor constructor); 16 | 17 | class CustomElement { 18 | final JSCustomElement element; 19 | 20 | CustomElement(this.element) { 21 | element.asDart = this; 22 | } 23 | 24 | void connected() {} 25 | void disconnected() {} 26 | } 27 | 28 | class HelloElement extends CustomElement{ 29 | HelloElement(JSCustomElement element) : super(element); 30 | 31 | void sayHello() { 32 | element.text = 'Hello from Dart!'; 33 | element.style.color = '#0175C2'; 34 | } 35 | } 36 | 37 | class GoodbyeElement extends CustomElement { 38 | GoodbyeElement(JSCustomElement element) : super(element); 39 | 40 | void sayGoodybe() { 41 | element.text = 'Goodbye from Dart!'; 42 | element.style.color = '#0175C2'; 43 | } 44 | } 45 | 46 | void main() { 47 | defineElement('dart-goodbye', allowInterop((e) => GoodbyeElement(e))); 48 | defineElement('dart-hello', allowInterop((e) => HelloElement(e))); 49 | 50 | var hello = document.body.append(Element.tag('dart-hello')) as JSCustomElement; 51 | hello.asDart.sayHello(); 52 | 53 | var goodbye = document.body.append(Element.tag('dart-goodbye')) as JSCustomElement; 54 | goodbye.asDart.sayGoodybe(); 55 | } 56 | --------------------------------------------------------------------------------