mirror of
https://github.com/flutter/flutter.git
synced 2026-02-20 02:29:02 +08:00
b3400475d5
The syntax for implementing a SkyElement is now:
<sky-element name="element-name">
<template>
<!-- template here -->
</template>
<script>
module.exports = class extends SkyElement {
attached() {
// ...
}
// .. methods here ..
}.register();
</script>
</sky-element>
The register() static method on SkyElement subclasses calls
document.registerElement() and returns the generated constructor.
It uses the parent <sky-element>'s name attribute to set the name
of the element.
R=rafaelw@chromium.org
Review URL: https://codereview.chromium.org/788943003
74 lines
1.5 KiB
Plaintext
74 lines
1.5 KiB
Plaintext
<!--
|
|
// Copyright 2014 The Chromium Authors. All rights reserved.
|
|
// Use of this source code is governed by a BSD-style license that can be
|
|
// found in the LICENSE file.
|
|
-->
|
|
<import src="TemplateBinding.sky" />
|
|
<script>
|
|
var templates = new Map();
|
|
|
|
class SkyElement extends HTMLElement {
|
|
|
|
static register() {
|
|
var wrapper = document.currentScript.parentNode;
|
|
|
|
if (wrapper.localName !== 'sky-element')
|
|
throw new Error('No <sky-element>.');
|
|
|
|
var tagName = wrapper.getAttribute("name");
|
|
if (!tagName)
|
|
throw new Error('<sky-element> must have a name.');
|
|
|
|
var template = wrapper.querySelector('template');
|
|
if (template)
|
|
templates.set(tagName, template);
|
|
|
|
return document.registerElement(tagName, {
|
|
prototype: this.prototype,
|
|
});
|
|
}
|
|
|
|
created() {
|
|
// override
|
|
}
|
|
|
|
attached() {
|
|
// override
|
|
}
|
|
|
|
dettached() {
|
|
// override
|
|
}
|
|
|
|
attributeChanged(attrName, oldValue, newValue) {
|
|
// override
|
|
}
|
|
|
|
createdCallback() {
|
|
this.created();
|
|
}
|
|
|
|
attachedCallback() {
|
|
if (!this.shadowRoot) {
|
|
var template = templates.get(this.localName);
|
|
if (template) {
|
|
var shadow = this.ensureShadowRoot();
|
|
shadow.appendChild(template.createInstance(this));
|
|
}
|
|
}
|
|
this.attached();
|
|
}
|
|
|
|
dettachedCallback() {
|
|
this.dettached();
|
|
}
|
|
|
|
attributeChangedCallback(attrName, oldValue, newValue) {
|
|
// reserved for canonical behavior
|
|
this.attributeChanged(attrName, oldValue, newValue);
|
|
}
|
|
};
|
|
|
|
module.exports = SkyElement;
|
|
</script>
|