diff --git a/.gitignore b/.gitignore index ba9db6f9..5fc75f33 100644 --- a/.gitignore +++ b/.gitignore @@ -14,4 +14,9 @@ lit-element.d.ts /demo/**/*.js /demo/**/*.js.map -!custom_typings/ \ No newline at end of file +!custom_typings/ + +#Docs + +docs/node_modules +.DS_Store diff --git a/docs/_config.yml b/docs/_config.yml new file mode 100644 index 00000000..67f324db --- /dev/null +++ b/docs/_config.yml @@ -0,0 +1,10 @@ +name: LitElement docs +description: A lightweight library for creating custom elements +exclude: [package.json, polymer.json, src, node_modules, package-lock.json] +markdown: kramdown +kramdown: + parse_block_html: true +projects: includes/projects +collections: + includes: + output: true diff --git a/docs/_data/site.yml b/docs/_data/site.yml new file mode 100644 index 00000000..5e201a9e --- /dev/null +++ b/docs/_data/site.yml @@ -0,0 +1,109 @@ +title: LitElement Documentation +toc: + try: + title: Try LitElement + url: /try/ + toc: + create: + title: Create your first custom element + url: /try/create + use: + title: Use your element in a web page + url: /try/use + properties: + title: Declare and use properties + url: /try/properties + expressions: + title: Add a loop and an “if” statement + url: /try/expressions + events: + title: Add an event handler + url: /try/events + style: + title: Style your element template + url: /try/style + docs: + title: API Documentation + url: /docs/ + toc: + create: + title: Create an element + url: /docs/create + toc: + index: + title: Overview + url: /docs/create/index + extend: + title: Extend the LitElement base class + url: /docs/create/extend + typescript: + title: Use TypeScript decorators to create a custom element + url: /docs/create/typescript + renderroot: + title: Customize an element's render root + url: /docs/create/renderroot + design: + title: Designing an element + url: /docs/create/design + import: + title: Import an existing element + url: /docs/import + templates: + title: Write a template + url: /docs/templates/ + toc: + index: + title: Write a template + url: /docs/templates/index + expressions: + title: Use plain JavaScript expressions in a template + url: /docs/templates/expressions + annotations: + title: Bind data to a child element in a template + url: /docs/templates/annotations + compose: + title: Compose and nest lit-element templates + url: /docs/templates/compose + slots: + title: Render light DOM children in a template + url: /docs/templates/slots + design: + title: Designing efficient LitElement templates + url: /docs/templates/design + properties: + title: Work with properties + url: /docs/properties + lifecycle: + title: Work with the element lifecycle + url: /docs/lifecycle/ + toc: + index: + title: The LitElement update lifecycle + url: /docs/lifecycle/index + tasks: + title: Perform tasks during the element update lifecycle + url: /docs/lifecycle/tasks + examples: + title: Example use cases + url: /docs/lifecycle/examples + methods: + title: Update lifecycle methods and Promises + url: /docs/lifecycle/methods + events: + title: Work with events + url: /docs/events + reuse: + title: Create reusable features + url: /docs/reuse + style: + title: Style elements with CSS + url: /docs/style + api: + title: API reference + url: /docs/api + tools: + title: Tools + url: /tools/ + about: + title: About LitElement + url: /about diff --git a/docs/_includes/analytics.html b/docs/_includes/analytics.html new file mode 100644 index 00000000..1735eadf --- /dev/null +++ b/docs/_includes/analytics.html @@ -0,0 +1,7 @@ + + diff --git a/docs/_includes/article.html b/docs/_includes/article.html new file mode 100644 index 00000000..9290ccad --- /dev/null +++ b/docs/_includes/article.html @@ -0,0 +1,21 @@ + +
{{section.title}}
+ +

{{topic.title}}

+ +{%- if topic.toc -%} + +
+

{{subtopic.title}}

+ +{%- endif -%} + +{{ content }} diff --git a/docs/_includes/prevnext.html b/docs/_includes/prevnext.html new file mode 100644 index 00000000..2f3469c5 --- /dev/null +++ b/docs/_includes/prevnext.html @@ -0,0 +1,13 @@ +{%- comment -%} Note: No HTML indentation to prevent markdown processing. {%- endcomment -%} +
+ + +
diff --git a/docs/_includes/project.html b/docs/_includes/project.html new file mode 100644 index 00000000..5e9f1fcd --- /dev/null +++ b/docs/_includes/project.html @@ -0,0 +1,4 @@ + + diff --git a/docs/_includes/projects/docs/annotations/custom-element.js b/docs/_includes/projects/docs/annotations/custom-element.js new file mode 100644 index 00000000..2ebc4eeb --- /dev/null +++ b/docs/_includes/projects/docs/annotations/custom-element.js @@ -0,0 +1,44 @@ +import { LitElement, html } from '@polymer/lit-element'; + +class CustomElement extends LitElement { + static get properties(){ + return { + prop1: String, + prop2: String, + prop3: Boolean, + prop4: String + }; + } + constructor(){ + super(); + this.prop1='text'; + this.prop2='attr'; + this.prop3=true; + this.prop4='fries'; + } + render(){ + return html` +
Bind to a child element's text node. ${this.prop1}
+ +
Bind to a child element's attribute.
+ +

Bind to a child element's boolean attribute. + +

+ +

Bind to a child element's property. + +

+ +

+ `; + } + handlePls(e){ + var id = e.target.id; + console.log(id + '.'); + } +} + +customElements.define('custom-element', CustomElement); diff --git a/docs/_includes/projects/docs/annotations/index.html b/docs/_includes/projects/docs/annotations/index.html new file mode 100644 index 00000000..b036bb03 --- /dev/null +++ b/docs/_includes/projects/docs/annotations/index.html @@ -0,0 +1,19 @@ + + + + + + + + + + lit-element code sample + + + + + + + + + diff --git a/docs/_includes/projects/docs/annotations/index.ts b/docs/_includes/projects/docs/annotations/index.ts new file mode 100644 index 00000000..801d654d --- /dev/null +++ b/docs/_includes/projects/docs/annotations/index.ts @@ -0,0 +1 @@ +import './custom-element.js'; diff --git a/docs/_includes/projects/docs/annotations/manifest.json b/docs/_includes/projects/docs/annotations/manifest.json new file mode 100644 index 00000000..9eca53a2 --- /dev/null +++ b/docs/_includes/projects/docs/annotations/manifest.json @@ -0,0 +1,14 @@ +{ + "title": "lit-element code sample", + "description": "lit-element code sample", + "files": [ + "custom-element.js", + "index.html", + "index.ts" + ], + "dependencies": { + "@polymer/lit-element": "latest", + "@webcomponents/webcomponentsjs": "latest" + }, + "template": "typescript" +} diff --git a/docs/_includes/projects/docs/compose/index.html b/docs/_includes/projects/docs/compose/index.html new file mode 100644 index 00000000..8779e6d2 --- /dev/null +++ b/docs/_includes/projects/docs/compose/index.html @@ -0,0 +1,17 @@ + + + + + + + + + lit-element code sample + + + + + + + + diff --git a/docs/_includes/projects/docs/compose/index.ts b/docs/_includes/projects/docs/compose/index.ts new file mode 100644 index 00000000..4bc604e5 --- /dev/null +++ b/docs/_includes/projects/docs/compose/index.ts @@ -0,0 +1 @@ +import './my-app.js'; diff --git a/docs/_includes/projects/docs/compose/manifest.json b/docs/_includes/projects/docs/compose/manifest.json new file mode 100644 index 00000000..ebbc078f --- /dev/null +++ b/docs/_includes/projects/docs/compose/manifest.json @@ -0,0 +1,14 @@ +{ + "title": "lit-element code sample", + "description": "lit-element code sample", + "files": [ + "my-app.js", + "index.html", + "index.ts" + ], + "dependencies": { + "@polymer/lit-element": "latest", + "@webcomponents/webcomponentsjs": "latest" + }, + "template": "typescript" +} diff --git a/docs/_includes/projects/docs/compose/my-app.js b/docs/_includes/projects/docs/compose/my-app.js new file mode 100644 index 00000000..a6b465bf --- /dev/null +++ b/docs/_includes/projects/docs/compose/my-app.js @@ -0,0 +1,51 @@ +import { LitElement, html } from '@polymer/lit-element'; + +class MyApp extends LitElement { + static get properties(){ + return { + headerText: { type: String }, + menu: { type: Array }, + footerText: { type: String } + }; + } + constructor(){ + super(); + this.headerText="My App"; + this.menu = [ + { 'url': '/design', title: 'Design'}, + { 'url': '/how', title: 'How-tos'}, + { 'url': '/about', title: 'About'} + ]; + this.footerText="Copyright (c) Me, 2018"; + this.myBool = true; + } + + static get headerTemplate(){ + return html` +
${this.headerText}
+ `; + } + static get navTemplate(){ + return html` + + `; + } + static get footerTemplate(){ + return html` + + `; + } + + render(){ + return html` + ${this.headerTemplate()} + ${this.navTemplate()} + ${this.footerTemplate()} + `; + } +} +customElements.define('my-app', MyApp); diff --git a/docs/_includes/projects/docs/create/index.html b/docs/_includes/projects/docs/create/index.html new file mode 100644 index 00000000..a3d38c6f --- /dev/null +++ b/docs/_includes/projects/docs/create/index.html @@ -0,0 +1,16 @@ + + + + + + + + + + + lit-element code sample + + + + + diff --git a/docs/_includes/projects/docs/create/index.ts b/docs/_includes/projects/docs/create/index.ts new file mode 100644 index 00000000..735d0c5f --- /dev/null +++ b/docs/_includes/projects/docs/create/index.ts @@ -0,0 +1 @@ +import './my-element.js'; diff --git a/docs/_includes/projects/docs/create/manifest.json b/docs/_includes/projects/docs/create/manifest.json new file mode 100644 index 00000000..567adb1e --- /dev/null +++ b/docs/_includes/projects/docs/create/manifest.json @@ -0,0 +1,14 @@ +{ + "files": [ + "my-element.js", + "index.html", + "index.ts" + ], + "title": "lit-element code sample", + "description": "lit-element code sample", + "template": "typescript", + "dependencies": { + "@polymer/lit-element": "latest", + "@webcomponents/webcomponentsjs": "latest" + } +} diff --git a/docs/_includes/projects/docs/create/my-element.js b/docs/_includes/projects/docs/create/my-element.js new file mode 100644 index 00000000..a337257a --- /dev/null +++ b/docs/_includes/projects/docs/create/my-element.js @@ -0,0 +1,27 @@ +// Import the LitElement base class and html helper function +import { LitElement, html } from '@polymer/lit-element'; + +// Extend the LitElement base class +class MyElement extends LitElement { + + /** + * Implement `render` to define a template for your element. + * + * You must provide an implementation of `render` for any element + * that uses LitElement as a base class. + */ + render(){ + /** + * `render` must return a lit-html `TemplateResult`. + * + * To create a `TemplateResult`, tag a JavaScript template literal + * with the `html` helper function: + */ + return html` + +

A paragraph

+ `; + } +} +// Register the new element with the browser. +customElements.define('my-element', MyElement); diff --git a/docs/_includes/projects/docs/expressions/README.md b/docs/_includes/projects/docs/expressions/README.md new file mode 100644 index 00000000..e69de29b diff --git a/docs/_includes/projects/docs/expressions/custom-element.js b/docs/_includes/projects/docs/expressions/custom-element.js new file mode 100644 index 00000000..a5a6b9ce --- /dev/null +++ b/docs/_includes/projects/docs/expressions/custom-element.js @@ -0,0 +1,27 @@ +import { LitElement, html } from '@polymer/lit-element'; + +class CustomElement extends LitElement { + static get properties(){ + return { + myArray: { type: Array }, + myBool: { type: Boolean } + }; + } + constructor(){ + super(); + this.myArray = ['an','array','of','test','data']; + this.myBool = true; + } + render(){ + return html` + + ${this.myBool? + html`

Render some HTML if myBool is true

`: + html`

Render some other HTML if myBool is false

`} + `; + } +} + +customElements.define('custom-element', CustomElement); diff --git a/docs/_includes/projects/docs/expressions/index.html b/docs/_includes/projects/docs/expressions/index.html new file mode 100644 index 00000000..eacfc6bb --- /dev/null +++ b/docs/_includes/projects/docs/expressions/index.html @@ -0,0 +1,17 @@ + + + + + + + + + lit-element code sample + + + + + + + + diff --git a/docs/_includes/projects/docs/expressions/index.ts b/docs/_includes/projects/docs/expressions/index.ts new file mode 100644 index 00000000..801d654d --- /dev/null +++ b/docs/_includes/projects/docs/expressions/index.ts @@ -0,0 +1 @@ +import './custom-element.js'; diff --git a/docs/_includes/projects/docs/expressions/manifest.json b/docs/_includes/projects/docs/expressions/manifest.json new file mode 100644 index 00000000..9eca53a2 --- /dev/null +++ b/docs/_includes/projects/docs/expressions/manifest.json @@ -0,0 +1,14 @@ +{ + "title": "lit-element code sample", + "description": "lit-element code sample", + "files": [ + "custom-element.js", + "index.html", + "index.ts" + ], + "dependencies": { + "@polymer/lit-element": "latest", + "@webcomponents/webcomponentsjs": "latest" + }, + "template": "typescript" +} diff --git a/docs/_includes/projects/docs/lifecycle/first/index.html b/docs/_includes/projects/docs/lifecycle/first/index.html new file mode 100644 index 00000000..205b902b --- /dev/null +++ b/docs/_includes/projects/docs/lifecycle/first/index.html @@ -0,0 +1,17 @@ + + + + + + + + + lit-element code sample + + + + + + + + diff --git a/docs/_includes/projects/docs/lifecycle/first/index.ts b/docs/_includes/projects/docs/lifecycle/first/index.ts new file mode 100644 index 00000000..735d0c5f --- /dev/null +++ b/docs/_includes/projects/docs/lifecycle/first/index.ts @@ -0,0 +1 @@ +import './my-element.js'; diff --git a/docs/_includes/projects/docs/lifecycle/first/manifest.json b/docs/_includes/projects/docs/lifecycle/first/manifest.json new file mode 100644 index 00000000..759a8a50 --- /dev/null +++ b/docs/_includes/projects/docs/lifecycle/first/manifest.json @@ -0,0 +1,14 @@ +{ + "title": "lit-element code sample", + "description": "lit-element code sample", + "files": [ + "my-element.js", + "index.html", + "index.ts" + ], + "dependencies": { + "@polymer/lit-element": "latest", + "@webcomponents/webcomponentsjs": "latest" + }, + "template": "typescript" +} diff --git a/docs/_includes/projects/docs/lifecycle/first/my-element.js b/docs/_includes/projects/docs/lifecycle/first/my-element.js new file mode 100644 index 00000000..fef82f5b --- /dev/null +++ b/docs/_includes/projects/docs/lifecycle/first/my-element.js @@ -0,0 +1,14 @@ +import { LitElement, html } from '@polymer/lit-element'; + +class MyElement extends LitElement { + render(){ + return html` + + `; + } + firstUpdated(changedProperties){ + console.log(changedProperties); + this.focus(); + } +} +customElements.define('my-element', MyElement); diff --git a/docs/_includes/projects/docs/renderroot/default-root.js b/docs/_includes/projects/docs/renderroot/default-root.js new file mode 100644 index 00000000..7ab98752 --- /dev/null +++ b/docs/_includes/projects/docs/renderroot/default-root.js @@ -0,0 +1,14 @@ +import { LitElement, html } from '@polymer/lit-element'; + +/** + * This element renders its template into the default location: + * a shadowRoot created by LitElement. + */ +class DefaultRoot extends LitElement { + render(){ + return html` +

Default render root. Template renders in shadow DOM.

+ `; + } +} +customElements.define('default-root', DefaultRoot); diff --git a/docs/_includes/projects/docs/renderroot/index.html b/docs/_includes/projects/docs/renderroot/index.html new file mode 100644 index 00000000..3c646990 --- /dev/null +++ b/docs/_includes/projects/docs/renderroot/index.html @@ -0,0 +1,19 @@ + + + + + + + + + + + + + lit-element code sample + + + + + + diff --git a/docs/_includes/projects/docs/renderroot/index.ts b/docs/_includes/projects/docs/renderroot/index.ts new file mode 100644 index 00000000..e4a842ca --- /dev/null +++ b/docs/_includes/projects/docs/renderroot/index.ts @@ -0,0 +1,2 @@ +import './default-root.js'; +import './light-dom.js'; diff --git a/docs/_includes/projects/docs/renderroot/light-dom.js b/docs/_includes/projects/docs/renderroot/light-dom.js new file mode 100644 index 00000000..3fc68ecf --- /dev/null +++ b/docs/_includes/projects/docs/renderroot/light-dom.js @@ -0,0 +1,22 @@ +import { LitElement, html } from '@polymer/lit-element'; + +/** + * This element renders its template as light DOM children. + */ +class LightDom extends LitElement { + render(){ + return html` +

Render root overridden. Template renders in light DOM.

+ `; + } + /** + * To customize an element's render root, implement createRenderRoot. Return + * the node into which to render the element's template. + * + * This element renders child nodes into its light DOM. + */ + createRenderRoot(){ + return this; + } +} +customElements.define('light-dom', LightDom); diff --git a/docs/_includes/projects/docs/renderroot/manifest.json b/docs/_includes/projects/docs/renderroot/manifest.json new file mode 100644 index 00000000..160ee6a8 --- /dev/null +++ b/docs/_includes/projects/docs/renderroot/manifest.json @@ -0,0 +1,15 @@ +{ + "files": [ + "default-root.js", + "light-dom.js", + "index.html", + "index.ts" + ], + "title": "lit-element code sample", + "description": "lit-element code sample", + "template": "typescript", + "dependencies": { + "@polymer/lit-element": "latest", + "@webcomponents/webcomponentsjs": "latest" + } +} diff --git a/docs/_includes/projects/docs/templates/dom-manip.js b/docs/_includes/projects/docs/templates/dom-manip.js new file mode 100644 index 00000000..1b0b3f79 --- /dev/null +++ b/docs/_includes/projects/docs/templates/dom-manip.js @@ -0,0 +1,27 @@ +import { LitElement, html } from '@polymer/lit-element'; + +/** + * Anti-pattern. Avoid manipulating DOM. + */ +class DomManip extends LitElement { + constructor(){ + super(); + this.addEventListener('stuff-loaded', this.doSomething.bind(this)); + this.loadStuff(); + } + render(){ + return html` +

Loading

+ `; + } + doSomething(){ + this.shadowRoot.getElementById('message').innerHTML='Loading complete.'; + } + loadStuff(){ + setInterval(() => { + var loaded = new CustomEvent('stuff-loaded', { detail: {}}); + this.dispatchEvent(loaded); + }, 3000); + } +} +customElements.define('dom-manip', DomManip); diff --git a/docs/_includes/projects/docs/templates/index.html b/docs/_includes/projects/docs/templates/index.html new file mode 100644 index 00000000..a4a8a4e9 --- /dev/null +++ b/docs/_includes/projects/docs/templates/index.html @@ -0,0 +1,19 @@ + + + + + + + + + + + + + lit-element code sample + + + + + + diff --git a/docs/_includes/projects/docs/templates/index.ts b/docs/_includes/projects/docs/templates/index.ts new file mode 100644 index 00000000..864cdbce --- /dev/null +++ b/docs/_includes/projects/docs/templates/index.ts @@ -0,0 +1,2 @@ +import './dom-manip.js'; +import './update-properties.js'; diff --git a/docs/_includes/projects/docs/templates/manifest.json b/docs/_includes/projects/docs/templates/manifest.json new file mode 100644 index 00000000..46a95d75 --- /dev/null +++ b/docs/_includes/projects/docs/templates/manifest.json @@ -0,0 +1,15 @@ +{ + "files": [ + "dom-manip.js", + "update-properties.js", + "index.html", + "index.ts" + ], + "title": "lit-element code sample", + "description": "lit-element code sample", + "template": "typescript", + "dependencies": { + "@polymer/lit-element": "latest", + "@webcomponents/webcomponentsjs": "latest" + } +} diff --git a/docs/_includes/projects/docs/templates/update-properties.js b/docs/_includes/projects/docs/templates/update-properties.js new file mode 100644 index 00000000..2881f973 --- /dev/null +++ b/docs/_includes/projects/docs/templates/update-properties.js @@ -0,0 +1,34 @@ +import { LitElement, html } from '@polymer/lit-element'; + +/** + * Use this pattern instead. + */ +class UpdateProperties extends LitElement { + static get properties(){ + return { + message: String + }; + } + constructor(){ + super(); + this.message='Loading'; + this.addEventListener('stuff-loaded', this.doSomething.bind(this)); + this.loadStuff(); + } + render(){ + return html` +

${this.message}

+ `; + } + doSomething(){ + this.message='Loading complete.'; + } + loadStuff(){ + setInterval(() => { + var loaded = new CustomEvent('stuff-loaded', { detail: {}}); + this.dispatchEvent(loaded); + }, 3000); + } +} + +customElements.define('update-properties', UpdateProperties); diff --git a/docs/_includes/projects/docs/templates1/index.html b/docs/_includes/projects/docs/templates1/index.html new file mode 100644 index 00000000..934071cf --- /dev/null +++ b/docs/_includes/projects/docs/templates1/index.html @@ -0,0 +1,17 @@ + + + + + + + + + + + + lit-element code sample + + + + + diff --git a/docs/_includes/projects/docs/templates1/index.ts b/docs/_includes/projects/docs/templates1/index.ts new file mode 100644 index 00000000..735d0c5f --- /dev/null +++ b/docs/_includes/projects/docs/templates1/index.ts @@ -0,0 +1 @@ +import './my-element.js'; diff --git a/docs/_includes/projects/docs/templates1/manifest.json b/docs/_includes/projects/docs/templates1/manifest.json new file mode 100644 index 00000000..567adb1e --- /dev/null +++ b/docs/_includes/projects/docs/templates1/manifest.json @@ -0,0 +1,14 @@ +{ + "files": [ + "my-element.js", + "index.html", + "index.ts" + ], + "title": "lit-element code sample", + "description": "lit-element code sample", + "template": "typescript", + "dependencies": { + "@polymer/lit-element": "latest", + "@webcomponents/webcomponentsjs": "latest" + } +} diff --git a/docs/_includes/projects/docs/templates1/my-element.js b/docs/_includes/projects/docs/templates1/my-element.js new file mode 100644 index 00000000..5475bf2b --- /dev/null +++ b/docs/_includes/projects/docs/templates1/my-element.js @@ -0,0 +1,31 @@ +import { LitElement, html } from '@polymer/lit-element'; + +class MyElement extends LitElement { + static get properties(){ + return { + prop1: Number, + prop2: Number + }; + } + constructor(){ + super(); + this.prop1=0; + this.prop2=1; + } + render(){ + return html` +

Static paragraph.

+

prop1: ${this.prop1}

+ + + `; + } + updated(){ + console.log('Updated'); + } + changeMe(prop){ + var rand = Math.floor(Math.random()*100); + prop=='prop1'?this.prop1=rand:this.prop2=rand; + } +} +customElements.define('my-element', MyElement); diff --git a/docs/_includes/projects/docs/typescript/index.html b/docs/_includes/projects/docs/typescript/index.html new file mode 100644 index 00000000..af6b024d --- /dev/null +++ b/docs/_includes/projects/docs/typescript/index.html @@ -0,0 +1,15 @@ + + + + + + + + + + lit-element code sample + + + + + diff --git a/docs/_includes/projects/docs/typescript/index.ts b/docs/_includes/projects/docs/typescript/index.ts new file mode 100644 index 00000000..40cbb8d8 --- /dev/null +++ b/docs/_includes/projects/docs/typescript/index.ts @@ -0,0 +1 @@ +import './my-element.ts'; diff --git a/docs/_includes/projects/docs/typescript/manifest.json b/docs/_includes/projects/docs/typescript/manifest.json new file mode 100644 index 00000000..1a862572 --- /dev/null +++ b/docs/_includes/projects/docs/typescript/manifest.json @@ -0,0 +1,14 @@ +{ + "files": [ + "my-element.ts", + "index.html", + "index.ts" + ], + "title": "lit-element code sample", + "description": "lit-element code sample", + "template": "typescript", + "dependencies": { + "@polymer/lit-element": "latest", + "@webcomponents/webcomponentsjs": "latest" + } +} diff --git a/docs/_includes/projects/docs/typescript/my-element.ts b/docs/_includes/projects/docs/typescript/my-element.ts new file mode 100644 index 00000000..5ade03b1 --- /dev/null +++ b/docs/_includes/projects/docs/typescript/my-element.ts @@ -0,0 +1,32 @@ +/** + * Import LitElement base class, html helper function, + * and TypeScript decorators + **/ +import { + LitElement, html, customElement, property +} from '@polymer/lit-element'; + +/** + * Use the customElement decorator to define your class as + * a custom element. Registers as an HTML tag. + */ +@customElement('my-element') +export class MyElement extends LitElement { + + /** + * Create an observed property. Triggers update on change. + */ + @property() + foo = 'foo'; + + /** + * Implement `render` to define a template for your element. + */ + render(){ + /** + * Use JavaScript expressions to include property values in + * the element template. + */ + return html`

${this.foo}

`; + } +} diff --git a/docs/_includes/projects/old/clone/README.md b/docs/_includes/projects/old/clone/README.md new file mode 100644 index 00000000..9f42b1be --- /dev/null +++ b/docs/_includes/projects/old/clone/README.md @@ -0,0 +1,93 @@ +To make sure object subproperty changes are rendered, use `Object.assign()` to rewrite the whole object when any of its subproperties change. + +```js +static get properties(){ + return { + student: Object + }; +} +constructor(){ + super(); + this.student={ id: '1234' name: 'Kazi' }; +} +_render({student}){ + return html` +
+ ${student.id} + ${student.name} +
+ `; +} +changeStudent(){ + // Don't do this: + // this.student.name='Lee'; + + // Do this instead: + this.student = Object.assign({}, this.student, { + name: 'Lee' + }); +} +``` + +## Background: JavaScript objects and arrays + +Changing an object subproperty or array item without reassigning the object itself is known as **mutation**. lit-element observes changes to the object itself, not its subproperties; so when you mutate an array or object, lit-element can't detect the change, and won't re-render the template. + +For this reason, when a subproperty changes, you should implement the change by cloning the object and merging it with its updated subproperties. Use [`Object.assign()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign) to do this. + +### Use Object.assign to make sure you create true clones + +JavaScript objects are references to locations in memory. If you create a naive copy of a JavaScript object, it will point to the same memory space as the original: + +```js +var thing = { + greeting: 'hello', + entity: 'world' +}; +// naive copy +var thing1 = thing; + +// also a naive copy +var thing2 = new Object(thing); +thing2.greeting='hi'; + +// all 3 point to the same memory space +if(thing===thing1===thing2){ + console.log('literally the same'); + console.log(thing.greeting, thing1.greeting, thing2.greeting); +} +``` + +Arrays are JavaScript `Object`s, and behave the same way: + +```js +var myArray=['some','boring','test','data']; +var otherArray=myArray; +otherArray[1]='nice'; +console.log(myArray[1]); +``` + +If you perform an update by creating a naive copy of an object (for example, with `var newObject = existingObject` or `var newObject = new Object('existingObject')`) instead of a true clone, you won't rewrite the object, and `_render` will not fire. + +## Object.assign + +To clone a new object, use `Object.assign()`: + +```js +var thing = { + greeting: 'hello', + entity: 'world' +}; +var newThing = Object.assign({}, thing); +newThing.greeting='hi'; +console.log(thing.greeting); +``` + +To clone a new array, you can also use `Object.assign()`: + +```js +var myArray=['some','boring','test','data']; +var newArray = Object.assign([], ...myArray); +newArray[1]='nice'; +console.log(myArray[1]); +``` diff --git a/docs/_includes/projects/old/clone/custom-element.js b/docs/_includes/projects/old/clone/custom-element.js new file mode 100644 index 00000000..88277310 --- /dev/null +++ b/docs/_includes/projects/old/clone/custom-element.js @@ -0,0 +1,36 @@ +import { LitElement, html } from '@polymer/lit-element'; + +class CustomElement extends LitElement { + static get properties(){ + return { + myArray: Array, + myObject: Object + }; + } + constructor(){ + super(); + this.myArray = ['hello', 'we', 'are', 'test', 'data']; + this.myObject = { + prop1: 'prop 1', + prop2: 'prop 2', + prop3: 'prop 3' + }; + } + _render({myArray, myObject}){ + return html` + + +
+ myObject.prop1: ${myObject.prop1}
+ myObject.prop2: ${myObject.prop2}
+ myObject.prop3: ${myObject.prop3}
+ + +

lit-element is rad :)

+ `; + } +} + +customElements.define('custom-element', CustomElement); diff --git a/docs/_includes/projects/old/clone/index.html b/docs/_includes/projects/old/clone/index.html new file mode 100644 index 00000000..58154c63 --- /dev/null +++ b/docs/_includes/projects/old/clone/index.html @@ -0,0 +1,19 @@ + + + + + + + + + + lit-element code sample + + + + + + + + + diff --git a/docs/_includes/projects/old/clone/index.js b/docs/_includes/projects/old/clone/index.js new file mode 100644 index 00000000..801d654d --- /dev/null +++ b/docs/_includes/projects/old/clone/index.js @@ -0,0 +1 @@ +import './custom-element.js'; diff --git a/docs/_includes/projects/old/clone/manifest.json b/docs/_includes/projects/old/clone/manifest.json new file mode 100644 index 00000000..77b07e7b --- /dev/null +++ b/docs/_includes/projects/old/clone/manifest.json @@ -0,0 +1,14 @@ +{ + "title": "lit-element code sample", + "description": "lit-element code sample", + "files": [ + "custom-element.js", + "index.html", + "index.js", + "README.md" + ], + "dependencies": { + "@polymer/lit-element": "0.5.2", + "@webcomponents/webcomponentsjs": "latest" + } +} diff --git a/docs/_includes/projects/old/declare/README.md b/docs/_includes/projects/old/declare/README.md new file mode 100644 index 00000000..3cb8a571 --- /dev/null +++ b/docs/_includes/projects/old/declare/README.md @@ -0,0 +1,36 @@ +To declare custom element properties with lit-element, add a static `properties` getter to your custom element class: + +```js +static get properties(){ + return { + myString: String, + myObject: Object + }; +} +``` + +You can supply any of the properties declared in the static `properties` getter to the element's `_render` function. Use JavaScript expressions to insert property values into an HTML template: + +```js +_render({myString, myObject}){ + return html` +

${myString}

+

myObject.prop1: ${myObject.prop1}

+

myObject.prop2: ${myObject.prop2}

+ `; +} +``` + +
+ +**You must declare a property in the `properties` getter AND supply the property name to `_render` in order to use the property value in template markup.** + +If you forget to supply the property name to `_render`, you may see something like the following error message: + +```text +ReferenceError: myString is not defined at HTMLElement.CustomElement._render +``` + +
+ +lit-element automatically observes all of the properties you declare in the static `properties` getter, and efficiently renders the changes in DOM. diff --git a/docs/_includes/projects/old/declare/custom-element.js b/docs/_includes/projects/old/declare/custom-element.js new file mode 100644 index 00000000..6b07a2d9 --- /dev/null +++ b/docs/_includes/projects/old/declare/custom-element.js @@ -0,0 +1,20 @@ +import { LitElement, html } from '@polymer/lit-element'; + +class CustomElement extends LitElement { + static get properties(){ + return { + myString: String + }; + } + constructor(){ + super(); + this.myString='initial value'; + } + _render({myString}){ + return html` +

${myString}

+ `; + } +} + +customElements.define('custom-element', CustomElement); diff --git a/docs/_includes/projects/old/declare/index.html b/docs/_includes/projects/old/declare/index.html new file mode 100644 index 00000000..095c86b8 --- /dev/null +++ b/docs/_includes/projects/old/declare/index.html @@ -0,0 +1,21 @@ + + + + + + + + + + lit-element code sample + + + + + + + + + + + diff --git a/docs/_includes/projects/old/declare/index.js b/docs/_includes/projects/old/declare/index.js new file mode 100644 index 00000000..801d654d --- /dev/null +++ b/docs/_includes/projects/old/declare/index.js @@ -0,0 +1 @@ +import './custom-element.js'; diff --git a/docs/_includes/projects/old/declare/manifest.json b/docs/_includes/projects/old/declare/manifest.json new file mode 100644 index 00000000..77b07e7b --- /dev/null +++ b/docs/_includes/projects/old/declare/manifest.json @@ -0,0 +1,14 @@ +{ + "title": "lit-element code sample", + "description": "lit-element code sample", + "files": [ + "custom-element.js", + "index.html", + "index.js", + "README.md" + ], + "dependencies": { + "@polymer/lit-element": "0.5.2", + "@webcomponents/webcomponentsjs": "latest" + } +} diff --git a/docs/_includes/projects/old/dispatch/README.md b/docs/_includes/projects/old/dispatch/README.md new file mode 100644 index 00000000..41d6ffaa --- /dev/null +++ b/docs/_includes/projects/old/dispatch/README.md @@ -0,0 +1,39 @@ + +To bind a lit-element property to the attribute of another element: + +```html + +``` + +**custom-element.js** + +```js +class CustomElement extends LitElement { + static get properties(){ + return { + myStyle: String + }; + } + constructor(){ + super(); + this.myStyle = ''; + } + _render({myStyle}){ + return html` + + +

lit-element is rad :)

+ `; + } +} +``` + +**index.html** + +```html + + +``` diff --git a/docs/_includes/projects/old/dispatch/custom-element.js b/docs/_includes/projects/old/dispatch/custom-element.js new file mode 100644 index 00000000..163cdbc0 --- /dev/null +++ b/docs/_includes/projects/old/dispatch/custom-element.js @@ -0,0 +1,25 @@ +import { LitElement, html } from '@polymer/lit-element'; + +class CustomElement extends LitElement { + static get properties(){ + return { + myStyle: String + }; + } + constructor(){ + super(); + this.myStyle = ''; + } + _render({myStyle}){ + return html` + + +

lit-element is rad :)

+ `; + } +} + +customElements.define('custom-element', CustomElement); diff --git a/docs/_includes/projects/old/dispatch/index.html b/docs/_includes/projects/old/dispatch/index.html new file mode 100644 index 00000000..45459f5e --- /dev/null +++ b/docs/_includes/projects/old/dispatch/index.html @@ -0,0 +1,20 @@ + + + + + + + + + + lit-element code sample + + + + + + + + + + diff --git a/docs/_includes/projects/old/dispatch/index.js b/docs/_includes/projects/old/dispatch/index.js new file mode 100644 index 00000000..801d654d --- /dev/null +++ b/docs/_includes/projects/old/dispatch/index.js @@ -0,0 +1 @@ +import './custom-element.js'; diff --git a/docs/_includes/projects/old/dispatch/manifest.json b/docs/_includes/projects/old/dispatch/manifest.json new file mode 100644 index 00000000..77b07e7b --- /dev/null +++ b/docs/_includes/projects/old/dispatch/manifest.json @@ -0,0 +1,14 @@ +{ + "title": "lit-element code sample", + "description": "lit-element code sample", + "files": [ + "custom-element.js", + "index.html", + "index.js", + "README.md" + ], + "dependencies": { + "@polymer/lit-element": "0.5.2", + "@webcomponents/webcomponentsjs": "latest" + } +} diff --git a/docs/_includes/projects/old/initialize/README.md b/docs/_includes/projects/old/initialize/README.md new file mode 100644 index 00000000..bd676225 --- /dev/null +++ b/docs/_includes/projects/old/initialize/README.md @@ -0,0 +1,128 @@ +You can initialize property values for a lit-element: + +* From the element's constructor +* From markup in an HTML document that imports the element +* From a data binding inside another lit-element +* From a script that accesses the lit-element in DOM + +## Initialize a property from a lit-element constructor + +To initialize a property from a lit-element constructor: + +
my-element.js
+ +```js +constructor(){ + super(); + this.myString='initial value'; + this.myObject= { prop1: 'stuff', prop2: 'blah' } +} +``` + +
+ +**Always initialize object and array properties in the constructor if their subproperties or items are used in an HTML template.** It's fine to initialize objects to the empty object (`{}`), and arrays to the empty array (`[]`); but they must be initialized. For example, if `myObject.prop1` and `anotherObject.myArray[x]` are used in an element template, initialize them as follows: + +```js +static get properties(){ + return { + myObject: Object; + anotherObject: Object; + } +} +constructor(){ + // myObject.prop1 is used in this template, + // so initialize myObject + this.myObject={}; + + // anotherObject.myArray[0-n] are used in this template, + // so initialize anotherObject.myArray + this.anotherObject={ + myArray: [] + }; +} +_render({myObject, anotherObject}){ + return html` +

${myObject.prop1}

+
    + ${anotherObject.myArray.map(i=>`
  • ${i}
  • `)} +
+ `; +} +``` +
+ +## Initialize a property from markup in an HTML document + +To provide a value for an element's declared `String` or `Number` property when the element is used in an HTML document, include the value as a string: + +
index.html
+ +```html + + + + +``` + +To provide a value for an element's declared `Boolean` property when the element is used in an HTML document: + +
index.html
+ +```html + + + + + + + +``` + +
+ +**Only `String`, `Number` and `Boolean` properties can be initialized by supplying strings in HTML.** For performance reasons, lit-element does not support supplying Object or Array property values via strings in HTML markup. See [] for alternatives. + +
+ +## Initialize a property from a data binding in another lit-element template + +From inside another lit-element template, you can provide values to a lit-element with data bindings using JavaScript expressions: + +```js +import {LitElement, html} from '@polymer/lit-element'; +import './my-element.js'; + +class SomeElement extends LitElement { + ... + _render({prop1, prop2}){ + return html` + + `; + } +} +customElement.define('some-element', SomeElement); +``` + +
+ +**Supplying object and array property values with JavaScript expressions is...???** + +```js +import {LitElement, html} from '@polymer/lit-element'; +import './my-element.js'; + +class SomeElement extends LitElement { + /* + * Is this okay? + */ + _render({myObject}){ + return html` + + `; + } +} +customElement.define('some-element', SomeElement); +``` + +
diff --git a/docs/_includes/projects/old/initialize/custom-element.js b/docs/_includes/projects/old/initialize/custom-element.js new file mode 100644 index 00000000..6b07a2d9 --- /dev/null +++ b/docs/_includes/projects/old/initialize/custom-element.js @@ -0,0 +1,20 @@ +import { LitElement, html } from '@polymer/lit-element'; + +class CustomElement extends LitElement { + static get properties(){ + return { + myString: String + }; + } + constructor(){ + super(); + this.myString='initial value'; + } + _render({myString}){ + return html` +

${myString}

+ `; + } +} + +customElements.define('custom-element', CustomElement); diff --git a/docs/_includes/projects/old/initialize/index.html b/docs/_includes/projects/old/initialize/index.html new file mode 100644 index 00000000..095c86b8 --- /dev/null +++ b/docs/_includes/projects/old/initialize/index.html @@ -0,0 +1,21 @@ + + + + + + + + + + lit-element code sample + + + + + + + + + + + diff --git a/docs/_includes/projects/old/initialize/index.js b/docs/_includes/projects/old/initialize/index.js new file mode 100644 index 00000000..801d654d --- /dev/null +++ b/docs/_includes/projects/old/initialize/index.js @@ -0,0 +1 @@ +import './custom-element.js'; diff --git a/docs/_includes/projects/old/initialize/manifest.json b/docs/_includes/projects/old/initialize/manifest.json new file mode 100644 index 00000000..77b07e7b --- /dev/null +++ b/docs/_includes/projects/old/initialize/manifest.json @@ -0,0 +1,14 @@ +{ + "title": "lit-element code sample", + "description": "lit-element code sample", + "files": [ + "custom-element.js", + "index.html", + "index.js", + "README.md" + ], + "dependencies": { + "@polymer/lit-element": "0.5.2", + "@webcomponents/webcomponentsjs": "latest" + } +} diff --git a/docs/_includes/projects/old/listeners/README.md b/docs/_includes/projects/old/listeners/README.md new file mode 100644 index 00000000..41d6ffaa --- /dev/null +++ b/docs/_includes/projects/old/listeners/README.md @@ -0,0 +1,39 @@ + +To bind a lit-element property to the attribute of another element: + +```html + +``` + +**custom-element.js** + +```js +class CustomElement extends LitElement { + static get properties(){ + return { + myStyle: String + }; + } + constructor(){ + super(); + this.myStyle = ''; + } + _render({myStyle}){ + return html` + + +

lit-element is rad :)

+ `; + } +} +``` + +**index.html** + +```html + + +``` diff --git a/docs/_includes/projects/old/listeners/custom-element.js b/docs/_includes/projects/old/listeners/custom-element.js new file mode 100644 index 00000000..163cdbc0 --- /dev/null +++ b/docs/_includes/projects/old/listeners/custom-element.js @@ -0,0 +1,25 @@ +import { LitElement, html } from '@polymer/lit-element'; + +class CustomElement extends LitElement { + static get properties(){ + return { + myStyle: String + }; + } + constructor(){ + super(); + this.myStyle = ''; + } + _render({myStyle}){ + return html` + + +

lit-element is rad :)

+ `; + } +} + +customElements.define('custom-element', CustomElement); diff --git a/docs/_includes/projects/old/listeners/index.html b/docs/_includes/projects/old/listeners/index.html new file mode 100644 index 00000000..45459f5e --- /dev/null +++ b/docs/_includes/projects/old/listeners/index.html @@ -0,0 +1,20 @@ + + + + + + + + + + lit-element code sample + + + + + + + + + + diff --git a/docs/_includes/projects/old/listeners/index.js b/docs/_includes/projects/old/listeners/index.js new file mode 100644 index 00000000..801d654d --- /dev/null +++ b/docs/_includes/projects/old/listeners/index.js @@ -0,0 +1 @@ +import './custom-element.js'; diff --git a/docs/_includes/projects/old/listeners/manifest.json b/docs/_includes/projects/old/listeners/manifest.json new file mode 100644 index 00000000..77b07e7b --- /dev/null +++ b/docs/_includes/projects/old/listeners/manifest.json @@ -0,0 +1,14 @@ +{ + "title": "lit-element code sample", + "description": "lit-element code sample", + "files": [ + "custom-element.js", + "index.html", + "index.js", + "README.md" + ], + "dependencies": { + "@polymer/lit-element": "0.5.2", + "@webcomponents/webcomponentsjs": "latest" + } +} diff --git a/docs/_includes/projects/old/objects/README.md b/docs/_includes/projects/old/objects/README.md new file mode 100644 index 00000000..144b867e --- /dev/null +++ b/docs/_includes/projects/old/objects/README.md @@ -0,0 +1,92 @@ +For performance reasons, lit-element does not support deserializing object and array properties via attributes in markup. + +Here's how we recommend you initialize array and object properties: + +## Set object properties directly instead of passing them via attributes + +Instead of passing stringified object and array properties via attributes in markup, set object and array properties directly: + +**main-app.js** + +```js +_render({}){ + return html` + + `; +} +_firstRendered(){ + const studentRec = this.shadowDom.querySelector('student-rec'); + studentRec.student={ + id: '12345', + name: 'Yasmeen' + }; +} +``` + +**student-rec.js** + +```js +properties(){ + return { + student: Object + } +} +constructor(){ + super(); + this.student = {}; +} +_render({student}){ + return html` +
+ ${student.id}
+ ${student.name}
+
+ `; +} +``` + +## Use the html helper function with JavaScript expressions to initialize object properties + +You can import and use the `html` helper function to initialize array and object properties. For example: + +**main-app.js** + +```js +_getStudent(){ + return { + id: '12345', + name: 'Yasmeen' + }; +} +_render({}){ + return html` + + `; +} +``` + +**student-rec.js** + +```js +properties(){ + return { + student: Object + } +} +constructor(){ + super(); + this.student = {}; +} +_render({student}){ + return html` +
+ ${student.id}
+ ${student.name}
+
+ `; +} +``` + +## Implement _deserializeValue + +If you need to deserialize properties from a string, [implement the `_deserializeValue` method](https://github.com/Polymer/lit-element/blob/2433ce376521aa8ab5272aa9c12a49ee74ac8c4e/custom_typings/polymer.d.ts#L304). diff --git a/docs/_includes/projects/old/objects/index.html b/docs/_includes/projects/old/objects/index.html new file mode 100644 index 00000000..7736e292 --- /dev/null +++ b/docs/_includes/projects/old/objects/index.html @@ -0,0 +1,19 @@ + + + + + + + + + + lit-element code sample + + + + + + + + + diff --git a/docs/_includes/projects/old/objects/index.js b/docs/_includes/projects/old/objects/index.js new file mode 100644 index 00000000..3ce9fa8f --- /dev/null +++ b/docs/_includes/projects/old/objects/index.js @@ -0,0 +1 @@ +import './main-app.js'; diff --git a/docs/_includes/projects/old/objects/main-app.js b/docs/_includes/projects/old/objects/main-app.js new file mode 100644 index 00000000..88ab3929 --- /dev/null +++ b/docs/_includes/projects/old/objects/main-app.js @@ -0,0 +1,19 @@ +import { LitElement, html } from '@polymer/lit-element'; +import './student-rec.js'; + +class MainApp extends LitElement { + _render({}){ + return html` + + `; + } + _firstRendered(){ + const studentRec = this.shadowRoot.querySelector('student-rec'); + studentRec.student={ + id: '12345', + name: 'Yasmeen' + }; + } +} + +customElements.define('main-app', MainApp); diff --git a/docs/_includes/projects/old/objects/manifest.json b/docs/_includes/projects/old/objects/manifest.json new file mode 100644 index 00000000..41800609 --- /dev/null +++ b/docs/_includes/projects/old/objects/manifest.json @@ -0,0 +1,15 @@ +{ + "title": "lit-element code sample", + "description": "lit-element code sample", + "files": [ + "main-app.js", + "student-rec.js", + "index.html", + "index.js", + "README.md" + ], + "dependencies": { + "@polymer/lit-element": "0.5.2", + "@webcomponents/webcomponentsjs": "latest" + } +} diff --git a/docs/_includes/projects/old/objects/student-rec.js b/docs/_includes/projects/old/objects/student-rec.js new file mode 100644 index 00000000..09aea9d5 --- /dev/null +++ b/docs/_includes/projects/old/objects/student-rec.js @@ -0,0 +1,23 @@ +import { LitElement, html } from '@polymer/lit-element'; + +class StudentRec extends LitElement { + static get properties(){ + return { + student: Object + } + } + constructor(){ + super(); + this.student = {}; + } + _render({student}){ + return html` +
+ ${student.id}
+ ${student.name}
+
+ `; + } +} + +customElements.define('student-rec', StudentRec); diff --git a/docs/_includes/projects/old/share/README.md b/docs/_includes/projects/old/share/README.md new file mode 100644 index 00000000..714edde7 --- /dev/null +++ b/docs/_includes/projects/old/share/README.md @@ -0,0 +1,13 @@ +This page is about sharing data upwards (from child to parent elements). For info about binding data downwards (from a parent element to a child element), see [data binding](/data/bind). + +lit-element doesn't support two-way data binding. To get the same effect, you have a few options. + +## Props down, events up + +For downwards data flow, use property bindings. + +For upwards data flow, use events. + +## State management + + diff --git a/docs/_includes/projects/old/share/child-1.js b/docs/_includes/projects/old/share/child-1.js new file mode 100644 index 00000000..933b9959 --- /dev/null +++ b/docs/_includes/projects/old/share/child-1.js @@ -0,0 +1,29 @@ +import { LitElement, html } from '@polymer/lit-element'; + +class Child1 extends LitElement { + static get properties(){ + return { + stuff: String + }; + } + constructor(){ + super(); + this.stuff=''; + } + _render({stuff}){ + return html` +

${stuff}

+ + `; + } + +} + +customElements.define('child-1', Child1); diff --git a/docs/_includes/projects/old/share/child-2.js b/docs/_includes/projects/old/share/child-2.js new file mode 100644 index 00000000..4a4844b9 --- /dev/null +++ b/docs/_includes/projects/old/share/child-2.js @@ -0,0 +1,29 @@ +import { LitElement, html } from '@polymer/lit-element'; + +class Child2 extends LitElement { + static get properties(){ + return { + stuff: String + }; + } + constructor(){ + super(); + this.stuff=''; + } + _render({stuff}){ + return html` +

${stuff}

+ + `; + } + +} + +customElements.define('child-2', Child2); diff --git a/docs/_includes/projects/old/share/index.html b/docs/_includes/projects/old/share/index.html new file mode 100644 index 00000000..665bd2bb --- /dev/null +++ b/docs/_includes/projects/old/share/index.html @@ -0,0 +1,18 @@ + + + + + + + lit-element code sample + + + + + + + + + + + diff --git a/docs/_includes/projects/old/share/index.js b/docs/_includes/projects/old/share/index.js new file mode 100644 index 00000000..d9e1b247 --- /dev/null +++ b/docs/_includes/projects/old/share/index.js @@ -0,0 +1 @@ +import './parent-element.js'; diff --git a/docs/_includes/projects/old/share/manifest.json b/docs/_includes/projects/old/share/manifest.json new file mode 100644 index 00000000..dc0236c3 --- /dev/null +++ b/docs/_includes/projects/old/share/manifest.json @@ -0,0 +1,16 @@ +{ + "title": "lit-element code sample", + "description": "lit-element code sample", + "files": [ + "parent-element.js", + "child-1.js", + "child-2.js", + "index.html", + "index.js", + "README.md" + ], + "dependencies": { + "@polymer/lit-element": "0.5.2", + "@webcomponents/webcomponentsjs": "latest" + } +} diff --git a/docs/_includes/projects/old/share/parent-element.js b/docs/_includes/projects/old/share/parent-element.js new file mode 100644 index 00000000..b463f0bf --- /dev/null +++ b/docs/_includes/projects/old/share/parent-element.js @@ -0,0 +1,41 @@ +import { LitElement, html } from '@polymer/lit-element'; +import './child-1.js'; +import './child-2.js'; + +class ParentElement extends LitElement { + static get properties(){ + return { + data: Object + }; + } + constructor(){ + super(); + this.data = { + prop1: 'stuff', + prop2: 'more stuff' + } + } + _render({data}){ + return html` +

parent-element

+

data.prop1: ${data.prop1}

+

data.prop2: ${data.prop2}

+

child-1

+ + +

child-2

+ + + `; + } +} + +customElements.define('parent-element', ParentElement); diff --git a/docs/_includes/projects/try/.DS_Store b/docs/_includes/projects/try/.DS_Store new file mode 100644 index 00000000..eb37db09 Binary files /dev/null and b/docs/_includes/projects/try/.DS_Store differ diff --git a/docs/_includes/projects/try/create/.DS_Store b/docs/_includes/projects/try/create/.DS_Store new file mode 100644 index 00000000..66331d9c Binary files /dev/null and b/docs/_includes/projects/try/create/.DS_Store differ diff --git a/docs/_includes/projects/try/create/after/index.html b/docs/_includes/projects/try/create/after/index.html new file mode 100644 index 00000000..a097c2fe --- /dev/null +++ b/docs/_includes/projects/try/create/after/index.html @@ -0,0 +1,14 @@ + + + + + + + + + lit-element code sample + + + + + diff --git a/docs/_includes/projects/try/create/after/index.ts b/docs/_includes/projects/try/create/after/index.ts new file mode 100644 index 00000000..735d0c5f --- /dev/null +++ b/docs/_includes/projects/try/create/after/index.ts @@ -0,0 +1 @@ +import './my-element.js'; diff --git a/docs/_includes/projects/try/create/after/manifest.json b/docs/_includes/projects/try/create/after/manifest.json new file mode 100644 index 00000000..567adb1e --- /dev/null +++ b/docs/_includes/projects/try/create/after/manifest.json @@ -0,0 +1,14 @@ +{ + "files": [ + "my-element.js", + "index.html", + "index.ts" + ], + "title": "lit-element code sample", + "description": "lit-element code sample", + "template": "typescript", + "dependencies": { + "@polymer/lit-element": "latest", + "@webcomponents/webcomponentsjs": "latest" + } +} diff --git a/docs/_includes/projects/try/create/after/my-element.js b/docs/_includes/projects/try/create/after/my-element.js new file mode 100644 index 00000000..e0bcdebc --- /dev/null +++ b/docs/_includes/projects/try/create/after/my-element.js @@ -0,0 +1,14 @@ +// Import LitElement base class and html helper function +import { LitElement, html } from '@polymer/lit-element'; + +// Create your class here +class MyElement extends LitElement { + render(){ + // Define your element template here + return html` +

Hello world! From my-element

+ `; + } +} +// Register the element with the browser +customElements.define('my-element', MyElement); diff --git a/docs/_includes/projects/try/create/before/index.html b/docs/_includes/projects/try/create/before/index.html new file mode 100644 index 00000000..a097c2fe --- /dev/null +++ b/docs/_includes/projects/try/create/before/index.html @@ -0,0 +1,14 @@ + + + + + + + + + lit-element code sample + + + + + diff --git a/docs/_includes/projects/try/create/before/index.ts b/docs/_includes/projects/try/create/before/index.ts new file mode 100644 index 00000000..735d0c5f --- /dev/null +++ b/docs/_includes/projects/try/create/before/index.ts @@ -0,0 +1 @@ +import './my-element.js'; diff --git a/docs/_includes/projects/try/create/before/manifest.json b/docs/_includes/projects/try/create/before/manifest.json new file mode 100644 index 00000000..567adb1e --- /dev/null +++ b/docs/_includes/projects/try/create/before/manifest.json @@ -0,0 +1,14 @@ +{ + "files": [ + "my-element.js", + "index.html", + "index.ts" + ], + "title": "lit-element code sample", + "description": "lit-element code sample", + "template": "typescript", + "dependencies": { + "@polymer/lit-element": "latest", + "@webcomponents/webcomponentsjs": "latest" + } +} diff --git a/docs/_includes/projects/try/create/before/my-element.js b/docs/_includes/projects/try/create/before/my-element.js new file mode 100644 index 00000000..f575ebfa --- /dev/null +++ b/docs/_includes/projects/try/create/before/my-element.js @@ -0,0 +1,12 @@ +// Import LitElement base class and html helper function +import { } from ''; + +// Create your class here +class MyElement { + render(){ + // Define your element template here + } +} + +// Register the element with the browser +customElements.define(); diff --git a/docs/_includes/projects/try/events/.DS_Store b/docs/_includes/projects/try/events/.DS_Store new file mode 100644 index 00000000..7c47070b Binary files /dev/null and b/docs/_includes/projects/try/events/.DS_Store differ diff --git a/docs/_includes/projects/try/events/after/index.html b/docs/_includes/projects/try/events/after/index.html new file mode 100644 index 00000000..205b902b --- /dev/null +++ b/docs/_includes/projects/try/events/after/index.html @@ -0,0 +1,17 @@ + + + + + + + + + lit-element code sample + + + + + + + + diff --git a/docs/_includes/projects/try/events/after/index.ts b/docs/_includes/projects/try/events/after/index.ts new file mode 100644 index 00000000..735d0c5f --- /dev/null +++ b/docs/_includes/projects/try/events/after/index.ts @@ -0,0 +1 @@ +import './my-element.js'; diff --git a/docs/_includes/projects/try/events/after/manifest.json b/docs/_includes/projects/try/events/after/manifest.json new file mode 100644 index 00000000..759a8a50 --- /dev/null +++ b/docs/_includes/projects/try/events/after/manifest.json @@ -0,0 +1,14 @@ +{ + "title": "lit-element code sample", + "description": "lit-element code sample", + "files": [ + "my-element.js", + "index.html", + "index.ts" + ], + "dependencies": { + "@polymer/lit-element": "latest", + "@webcomponents/webcomponentsjs": "latest" + }, + "template": "typescript" +} diff --git a/docs/_includes/projects/try/events/after/my-element.js b/docs/_includes/projects/try/events/after/my-element.js new file mode 100644 index 00000000..c97d83c9 --- /dev/null +++ b/docs/_includes/projects/try/events/after/my-element.js @@ -0,0 +1,41 @@ +import { LitElement, html } from '@polymer/lit-element'; + +class MyElement extends LitElement { + static get properties(){ + return { + message: { type: String }, + myArray: { type: Array }, + myBool: { type: Boolean } + }; + } + constructor(){ + super(); + + this.message='Hello world! From my-element'; + + this.myArray = ['an','array','of','test','data']; + this.myBool = true; + } + + render(){ + return html` +

${this.message}

+ + + ${this.myBool? + html`

Render some HTML if myBool is true

`: + html`

Render some other HTML if myBool is false

`} + + + + `; + } + // Add an event handler here. + clickHandler(event){ + console.log(event.target); + this.myBool = !this.myBool; + } +} +customElements.define('my-element', MyElement); diff --git a/docs/_includes/projects/try/events/before/index.html b/docs/_includes/projects/try/events/before/index.html new file mode 100644 index 00000000..205b902b --- /dev/null +++ b/docs/_includes/projects/try/events/before/index.html @@ -0,0 +1,17 @@ + + + + + + + + + lit-element code sample + + + + + + + + diff --git a/docs/_includes/projects/try/events/before/index.ts b/docs/_includes/projects/try/events/before/index.ts new file mode 100644 index 00000000..735d0c5f --- /dev/null +++ b/docs/_includes/projects/try/events/before/index.ts @@ -0,0 +1 @@ +import './my-element.js'; diff --git a/docs/_includes/projects/try/events/before/manifest.json b/docs/_includes/projects/try/events/before/manifest.json new file mode 100644 index 00000000..759a8a50 --- /dev/null +++ b/docs/_includes/projects/try/events/before/manifest.json @@ -0,0 +1,14 @@ +{ + "title": "lit-element code sample", + "description": "lit-element code sample", + "files": [ + "my-element.js", + "index.html", + "index.ts" + ], + "dependencies": { + "@polymer/lit-element": "latest", + "@webcomponents/webcomponentsjs": "latest" + }, + "template": "typescript" +} diff --git a/docs/_includes/projects/try/events/before/my-element.js b/docs/_includes/projects/try/events/before/my-element.js new file mode 100644 index 00000000..15655133 --- /dev/null +++ b/docs/_includes/projects/try/events/before/my-element.js @@ -0,0 +1,37 @@ +import { LitElement, html } from '@polymer/lit-element'; + +class MyElement extends LitElement { + static get properties(){ + return { + message: { type: String }, + myArray: { type: Array }, + myBool: { type: Boolean } + }; + } + constructor(){ + super(); + + this.message='Hello world! From my-element'; + + this.myArray = ['an','array','of','test','data']; + this.myBool = true; + } + + render(){ + return html` +

${this.message}

+ + + ${this.myBool? + html`

Render some HTML if myBool is true

`: + html`

Render some other HTML if myBool is false

`} + + + + `; + } + // Add an event handler here. +} +customElements.define('my-element', MyElement); diff --git a/docs/_includes/projects/try/expressions/.DS_Store b/docs/_includes/projects/try/expressions/.DS_Store new file mode 100644 index 00000000..55526b2f Binary files /dev/null and b/docs/_includes/projects/try/expressions/.DS_Store differ diff --git a/docs/_includes/projects/try/expressions/after/index.html b/docs/_includes/projects/try/expressions/after/index.html new file mode 100644 index 00000000..205b902b --- /dev/null +++ b/docs/_includes/projects/try/expressions/after/index.html @@ -0,0 +1,17 @@ + + + + + + + + + lit-element code sample + + + + + + + + diff --git a/docs/_includes/projects/try/expressions/after/index.ts b/docs/_includes/projects/try/expressions/after/index.ts new file mode 100644 index 00000000..735d0c5f --- /dev/null +++ b/docs/_includes/projects/try/expressions/after/index.ts @@ -0,0 +1 @@ +import './my-element.js'; diff --git a/docs/_includes/projects/try/expressions/after/manifest.json b/docs/_includes/projects/try/expressions/after/manifest.json new file mode 100644 index 00000000..759a8a50 --- /dev/null +++ b/docs/_includes/projects/try/expressions/after/manifest.json @@ -0,0 +1,14 @@ +{ + "title": "lit-element code sample", + "description": "lit-element code sample", + "files": [ + "my-element.js", + "index.html", + "index.ts" + ], + "dependencies": { + "@polymer/lit-element": "latest", + "@webcomponents/webcomponentsjs": "latest" + }, + "template": "typescript" +} diff --git a/docs/_includes/projects/try/expressions/after/my-element.js b/docs/_includes/projects/try/expressions/after/my-element.js new file mode 100644 index 00000000..d1b89ecb --- /dev/null +++ b/docs/_includes/projects/try/expressions/after/my-element.js @@ -0,0 +1,35 @@ +import { LitElement, html } from '@polymer/lit-element'; + +class MyElement extends LitElement { + static get properties(){ + return { + message: { type: String }, + myArray: { type: Array }, + myBool: { type: Boolean } + }; + } + constructor(){ + super(); + + this.message='Hello world! From my-element'; + + // Initialize myArray and myBool here. + this.myArray = ['an','array','of','test','data']; + this.myBool = true; + } + + render(){ + return html` +

${this.message}

+ + + + ${this.myBool? + html`

Render some HTML if myBool is true

`: + html`

Render some other HTML if myBool is false

`} + `; + } +} +customElements.define('my-element', MyElement); diff --git a/docs/_includes/projects/try/expressions/before/index.html b/docs/_includes/projects/try/expressions/before/index.html new file mode 100644 index 00000000..cf412668 --- /dev/null +++ b/docs/_includes/projects/try/expressions/before/index.html @@ -0,0 +1,16 @@ + + + + + + + + + lit-element code sample + + + + + + + diff --git a/docs/_includes/projects/try/expressions/before/index.ts b/docs/_includes/projects/try/expressions/before/index.ts new file mode 100644 index 00000000..735d0c5f --- /dev/null +++ b/docs/_includes/projects/try/expressions/before/index.ts @@ -0,0 +1 @@ +import './my-element.js'; diff --git a/docs/_includes/projects/try/expressions/before/manifest.json b/docs/_includes/projects/try/expressions/before/manifest.json new file mode 100644 index 00000000..759a8a50 --- /dev/null +++ b/docs/_includes/projects/try/expressions/before/manifest.json @@ -0,0 +1,14 @@ +{ + "title": "lit-element code sample", + "description": "lit-element code sample", + "files": [ + "my-element.js", + "index.html", + "index.ts" + ], + "dependencies": { + "@polymer/lit-element": "latest", + "@webcomponents/webcomponentsjs": "latest" + }, + "template": "typescript" +} diff --git a/docs/_includes/projects/try/expressions/before/my-element.js b/docs/_includes/projects/try/expressions/before/my-element.js new file mode 100644 index 00000000..ba5ab840 --- /dev/null +++ b/docs/_includes/projects/try/expressions/before/my-element.js @@ -0,0 +1,27 @@ +import { LitElement, html } from '@polymer/lit-element'; + +class MyElement extends LitElement { + static get properties(){ + return { + message: { type: String }, + myArray: { type: Array }, + myBool: { type: Boolean } + }; + } + constructor(){ + super(); + this.message='Hello world! From my-element'; + + // Initialize myArray and myBool here. + + } + + render(){ + return html` +

${this.message}

+ + + `; + } +} +customElements.define('my-element', MyElement); diff --git a/docs/_includes/projects/try/properties/.DS_Store b/docs/_includes/projects/try/properties/.DS_Store new file mode 100644 index 00000000..c9844b75 Binary files /dev/null and b/docs/_includes/projects/try/properties/.DS_Store differ diff --git a/docs/_includes/projects/try/properties/after/index.html b/docs/_includes/projects/try/properties/after/index.html new file mode 100644 index 00000000..cf412668 --- /dev/null +++ b/docs/_includes/projects/try/properties/after/index.html @@ -0,0 +1,16 @@ + + + + + + + + + lit-element code sample + + + + + + + diff --git a/docs/_includes/projects/try/properties/after/index.ts b/docs/_includes/projects/try/properties/after/index.ts new file mode 100644 index 00000000..735d0c5f --- /dev/null +++ b/docs/_includes/projects/try/properties/after/index.ts @@ -0,0 +1 @@ +import './my-element.js'; diff --git a/docs/_includes/projects/try/properties/after/manifest.json b/docs/_includes/projects/try/properties/after/manifest.json new file mode 100644 index 00000000..759a8a50 --- /dev/null +++ b/docs/_includes/projects/try/properties/after/manifest.json @@ -0,0 +1,14 @@ +{ + "title": "lit-element code sample", + "description": "lit-element code sample", + "files": [ + "my-element.js", + "index.html", + "index.ts" + ], + "dependencies": { + "@polymer/lit-element": "latest", + "@webcomponents/webcomponentsjs": "latest" + }, + "template": "typescript" +} diff --git a/docs/_includes/projects/try/properties/after/my-element.js b/docs/_includes/projects/try/properties/after/my-element.js new file mode 100644 index 00000000..2d847bec --- /dev/null +++ b/docs/_includes/projects/try/properties/after/my-element.js @@ -0,0 +1,23 @@ +import { LitElement, html } from '@polymer/lit-element'; + +class MyElement extends LitElement { + static get properties(){ + return { + // Declare property here. + message: { type: String } + }; + } + constructor(){ + super(); + // Initialize property here. + this.message='Hello world! From my-element'; + } + + render(){ + return html` + +

${this.message}

+ `; + } +} +customElements.define('my-element', MyElement); diff --git a/docs/_includes/projects/try/properties/before/index.html b/docs/_includes/projects/try/properties/before/index.html new file mode 100644 index 00000000..1a1c0a6e --- /dev/null +++ b/docs/_includes/projects/try/properties/before/index.html @@ -0,0 +1,15 @@ + + + + + + + + + lit-element code sample + + + + + + diff --git a/docs/_includes/projects/try/properties/before/index.ts b/docs/_includes/projects/try/properties/before/index.ts new file mode 100644 index 00000000..735d0c5f --- /dev/null +++ b/docs/_includes/projects/try/properties/before/index.ts @@ -0,0 +1 @@ +import './my-element.js'; diff --git a/docs/_includes/projects/try/properties/before/manifest.json b/docs/_includes/projects/try/properties/before/manifest.json new file mode 100644 index 00000000..567adb1e --- /dev/null +++ b/docs/_includes/projects/try/properties/before/manifest.json @@ -0,0 +1,14 @@ +{ + "files": [ + "my-element.js", + "index.html", + "index.ts" + ], + "title": "lit-element code sample", + "description": "lit-element code sample", + "template": "typescript", + "dependencies": { + "@polymer/lit-element": "latest", + "@webcomponents/webcomponentsjs": "latest" + } +} diff --git a/docs/_includes/projects/try/properties/before/my-element.js b/docs/_includes/projects/try/properties/before/my-element.js new file mode 100644 index 00000000..60713723 --- /dev/null +++ b/docs/_includes/projects/try/properties/before/my-element.js @@ -0,0 +1,20 @@ +import { LitElement, html } from '@polymer/lit-element'; + +class MyElement extends LitElement { + static get properties(){ + return { + // Declare property here. + }; + } + constructor(){ + super(); + // Initialize property here. + } + render(){ + return html` + +

+ `; + } +} +customElements.define('my-element', MyElement); diff --git a/docs/_includes/projects/try/style/.DS_Store b/docs/_includes/projects/try/style/.DS_Store new file mode 100644 index 00000000..446b727a Binary files /dev/null and b/docs/_includes/projects/try/style/.DS_Store differ diff --git a/docs/_includes/projects/try/style/after/index.html b/docs/_includes/projects/try/style/after/index.html new file mode 100644 index 00000000..205b902b --- /dev/null +++ b/docs/_includes/projects/try/style/after/index.html @@ -0,0 +1,17 @@ + + + + + + + + + lit-element code sample + + + + + + + + diff --git a/docs/_includes/projects/try/style/after/index.ts b/docs/_includes/projects/try/style/after/index.ts new file mode 100644 index 00000000..735d0c5f --- /dev/null +++ b/docs/_includes/projects/try/style/after/index.ts @@ -0,0 +1 @@ +import './my-element.js'; diff --git a/docs/_includes/projects/try/style/after/manifest.json b/docs/_includes/projects/try/style/after/manifest.json new file mode 100644 index 00000000..759a8a50 --- /dev/null +++ b/docs/_includes/projects/try/style/after/manifest.json @@ -0,0 +1,14 @@ +{ + "title": "lit-element code sample", + "description": "lit-element code sample", + "files": [ + "my-element.js", + "index.html", + "index.ts" + ], + "dependencies": { + "@polymer/lit-element": "latest", + "@webcomponents/webcomponentsjs": "latest" + }, + "template": "typescript" +} diff --git a/docs/_includes/projects/try/style/after/my-element.js b/docs/_includes/projects/try/style/after/my-element.js new file mode 100644 index 00000000..34957ea8 --- /dev/null +++ b/docs/_includes/projects/try/style/after/my-element.js @@ -0,0 +1,50 @@ +import { LitElement, html } from '@polymer/lit-element'; + +class MyElement extends LitElement { + static get properties(){ + return { + message: { type: String }, + myArray: { type: Array }, + myBool: { type: Boolean } + }; + } + constructor(){ + super(); + this.message='Hello world! From my-element'; + this.myArray = ['an','array','of','test','data']; + this.myBool = true; + } + + render(){ + return html` + + + +

${this.message}

+ + + + +

style me

+ + + `; + } + clickHandler(event){ + console.log(event.target); + this.myBool = !this.myBool; + } +} +customElements.define('my-element', MyElement); diff --git a/docs/_includes/projects/try/style/before/index.html b/docs/_includes/projects/try/style/before/index.html new file mode 100644 index 00000000..205b902b --- /dev/null +++ b/docs/_includes/projects/try/style/before/index.html @@ -0,0 +1,17 @@ + + + + + + + + + lit-element code sample + + + + + + + + diff --git a/docs/_includes/projects/try/style/before/index.ts b/docs/_includes/projects/try/style/before/index.ts new file mode 100644 index 00000000..735d0c5f --- /dev/null +++ b/docs/_includes/projects/try/style/before/index.ts @@ -0,0 +1 @@ +import './my-element.js'; diff --git a/docs/_includes/projects/try/style/before/manifest.json b/docs/_includes/projects/try/style/before/manifest.json new file mode 100644 index 00000000..759a8a50 --- /dev/null +++ b/docs/_includes/projects/try/style/before/manifest.json @@ -0,0 +1,14 @@ +{ + "title": "lit-element code sample", + "description": "lit-element code sample", + "files": [ + "my-element.js", + "index.html", + "index.ts" + ], + "dependencies": { + "@polymer/lit-element": "latest", + "@webcomponents/webcomponentsjs": "latest" + }, + "template": "typescript" +} diff --git a/docs/_includes/projects/try/style/before/my-element.js b/docs/_includes/projects/try/style/before/my-element.js new file mode 100644 index 00000000..c1dfee26 --- /dev/null +++ b/docs/_includes/projects/try/style/before/my-element.js @@ -0,0 +1,37 @@ +import { LitElement, html } from '@polymer/lit-element'; + +class MyElement extends LitElement { + static get properties(){ + return { + message: { type: String }, + myArray: { type: Array }, + myBool: { type: Boolean } + }; + } + constructor(){ + super(); + this.message='Hello world! From my-element'; + this.myArray = ['an','array','of','test','data']; + this.myBool = true; + } + + render(){ + return html` + + +

${this.message}

+ + + + +

style me

+ + + `; + } + clickHandler(event){ + console.log(event.target); + this.myBool = !this.myBool; + } +} +customElements.define('my-element', MyElement); diff --git a/docs/_includes/projects/try/use/.DS_Store b/docs/_includes/projects/try/use/.DS_Store new file mode 100644 index 00000000..66331d9c Binary files /dev/null and b/docs/_includes/projects/try/use/.DS_Store differ diff --git a/docs/_includes/projects/try/use/after/index.html b/docs/_includes/projects/try/use/after/index.html new file mode 100644 index 00000000..9e5379a2 --- /dev/null +++ b/docs/_includes/projects/try/use/after/index.html @@ -0,0 +1,15 @@ + + + + + + + + + lit-element code sample + + + + + + diff --git a/docs/_includes/projects/try/use/after/index.ts b/docs/_includes/projects/try/use/after/index.ts new file mode 100644 index 00000000..735d0c5f --- /dev/null +++ b/docs/_includes/projects/try/use/after/index.ts @@ -0,0 +1 @@ +import './my-element.js'; diff --git a/docs/_includes/projects/try/use/after/manifest.json b/docs/_includes/projects/try/use/after/manifest.json new file mode 100644 index 00000000..567adb1e --- /dev/null +++ b/docs/_includes/projects/try/use/after/manifest.json @@ -0,0 +1,14 @@ +{ + "files": [ + "my-element.js", + "index.html", + "index.ts" + ], + "title": "lit-element code sample", + "description": "lit-element code sample", + "template": "typescript", + "dependencies": { + "@polymer/lit-element": "latest", + "@webcomponents/webcomponentsjs": "latest" + } +} diff --git a/docs/_includes/projects/try/use/after/my-element.js b/docs/_includes/projects/try/use/after/my-element.js new file mode 100644 index 00000000..ddcb66b3 --- /dev/null +++ b/docs/_includes/projects/try/use/after/my-element.js @@ -0,0 +1,14 @@ +// Import and extend the LitElement base class. +import { LitElement, html } from '@polymer/lit-element'; + +class MyElement extends LitElement { + // Return your template from lit-element's `render` function. + render(){ + return html` + +

Hello world! From my-element

+ `; + } +} +// Register the new element with the browser. +customElements.define('my-element', MyElement); diff --git a/docs/_includes/projects/try/use/before/index.html b/docs/_includes/projects/try/use/before/index.html new file mode 100644 index 00000000..ede65eea --- /dev/null +++ b/docs/_includes/projects/try/use/before/index.html @@ -0,0 +1,14 @@ + + + + + + + + + lit-element code sample + + + + + diff --git a/docs/_includes/projects/try/use/before/index.ts b/docs/_includes/projects/try/use/before/index.ts new file mode 100644 index 00000000..735d0c5f --- /dev/null +++ b/docs/_includes/projects/try/use/before/index.ts @@ -0,0 +1 @@ +import './my-element.js'; diff --git a/docs/_includes/projects/try/use/before/manifest.json b/docs/_includes/projects/try/use/before/manifest.json new file mode 100644 index 00000000..567adb1e --- /dev/null +++ b/docs/_includes/projects/try/use/before/manifest.json @@ -0,0 +1,14 @@ +{ + "files": [ + "my-element.js", + "index.html", + "index.ts" + ], + "title": "lit-element code sample", + "description": "lit-element code sample", + "template": "typescript", + "dependencies": { + "@polymer/lit-element": "latest", + "@webcomponents/webcomponentsjs": "latest" + } +} diff --git a/docs/_includes/projects/try/use/before/my-element.js b/docs/_includes/projects/try/use/before/my-element.js new file mode 100644 index 00000000..ddcb66b3 --- /dev/null +++ b/docs/_includes/projects/try/use/before/my-element.js @@ -0,0 +1,14 @@ +// Import and extend the LitElement base class. +import { LitElement, html } from '@polymer/lit-element'; + +class MyElement extends LitElement { + // Return your template from lit-element's `render` function. + render(){ + return html` + +

Hello world! From my-element

+ `; + } +} +// Register the new element with the browser. +customElements.define('my-element', MyElement); diff --git a/docs/_includes/tocnav.html b/docs/_includes/tocnav.html new file mode 100644 index 00000000..65b19ac4 --- /dev/null +++ b/docs/_includes/tocnav.html @@ -0,0 +1,21 @@ + diff --git a/docs/_layouts/default.html b/docs/_layouts/default.html new file mode 100644 index 00000000..9d219f30 --- /dev/null +++ b/docs/_layouts/default.html @@ -0,0 +1,41 @@ + + + + + + + {%- if page.title -%}{{ page.title }} –{%- endif -%} {{ site.name }} + + + + + {% if site.google_analytics and jekyll.environment == 'production' %} + {% include analytics.html %} + {% endif %} + + + + + + + {{content}} + + + + diff --git a/docs/_layouts/post.html b/docs/_layouts/post.html new file mode 100644 index 00000000..a556aefa --- /dev/null +++ b/docs/_layouts/post.html @@ -0,0 +1,47 @@ +--- +layout: default +--- +{%- assign title = "LitElement Documentation" -%} +{%- assign sections = site.data.site.toc -%} +{%- assign section = sections[page.section] -%} +{%- assign topics = section.toc -%} +{%- assign topic = topics[page.topic] -%} +{%- assign subtopics = topic.toc -%} +{%- assign subtopic = subtopics[page.subtopic] -%} + +{%- if subtopic -%} + {%- assign self = subtopic -%} +{%- elsif topic -%} + {%- assign self = topic -%} +{%- elsif section -%} + {%- assign self=section -%} +{%- else -%} + {%- assign self = site.data.site -%} +{%- endif -%} + +
+ + +
+ {%- include article.html -%} +
+
+ + diff --git a/docs/about.md b/docs/about.md new file mode 100644 index 00000000..7c6231ec --- /dev/null +++ b/docs/about.md @@ -0,0 +1,8 @@ +--- +layout: post +section: about +todo: true +--- + +TODO: what needs to be on this page + diff --git a/docs/build/gh-pages/node_modules/@webcomponents/webcomponentsjs/LICENSE.md b/docs/build/gh-pages/node_modules/@webcomponents/webcomponentsjs/LICENSE.md new file mode 100644 index 00000000..bb3f4403 --- /dev/null +++ b/docs/build/gh-pages/node_modules/@webcomponents/webcomponentsjs/LICENSE.md @@ -0,0 +1,19 @@ +# License + +Everything in this repo is BSD style license unless otherwise specified. + +Copyright (c) 2015 The Polymer Authors. All rights reserved. + +Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met: + +* Redistributions of source code must retain the above copyright +notice, this list of conditions and the following disclaimer. +* Redistributions in binary form must reproduce the above +copyright notice, this list of conditions and the following disclaimer +in the documentation and/or other materials provided with the +distribution. +* Neither the name of Google Inc. nor the names of its +contributors may be used to endorse or promote products derived from +this software without specific prior written permission. + +THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. \ No newline at end of file diff --git a/docs/build/gh-pages/node_modules/@webcomponents/webcomponentsjs/README.md b/docs/build/gh-pages/node_modules/@webcomponents/webcomponentsjs/README.md new file mode 100644 index 00000000..2ddeb7d8 --- /dev/null +++ b/docs/build/gh-pages/node_modules/@webcomponents/webcomponentsjs/README.md @@ -0,0 +1,234 @@ +[![Build Status](https://travis-ci.org/webcomponents/webcomponentsjs.svg?branch=master)](https://travis-ci.org/webcomponents/webcomponentsjs) + +webcomponents.js (v1 spec polyfills) +================ + +> **Note**. For polyfills that work with the older Custom Elements and Shadow DOM v0 specs, +see the [v0 branch](https://github.com/webcomponents/webcomponentsjs/tree/v0). + +> **Note**. For polyfills that include HTML Imports, +see the [v1 branch](https://github.com/webcomponents/webcomponentsjs/tree/v1). + +A suite of polyfills supporting the [Web Components](http://webcomponents.org) specs: + +- **Custom Elements v1**: allows authors to define their own custom tags ([spec](https://w3c.github.io/webcomponents/spec/custom/), [tutorial](https://developers.google.com/web/fundamentals/getting-started/primers/customelements), [polyfill](https://github.com/webcomponents/custom-elements)). +- **Shadow DOM v1**: provides encapsulation by hiding DOM subtrees under shadow roots ([spec](https://w3c.github.io/webcomponents/spec/shadow/), [tutorial](https://developers.google.com/web/fundamentals/getting-started/primers/shadowdom), +[shadydom polyfill](https://github.com/webcomponents/shadydom), [shadycss polyfill](https://github.com/webcomponents/shadycss)). + +For browsers that need it, there are also some minor polyfills included: +- [`HTMLTemplateElement`](https://github.com/webcomponents/template) +- [`Promise`](https://github.com/stefanpenner/es6-promise) +- `Event`, `CustomEvent`, `MouseEvent` constructors and `Object.assign`, `Array.from` +(see [webcomponents-platform](https://github.com/webcomponents/webcomponents-platform)) +- [`URL constructor`](https://github.com/webcomponents/URL) + +## How to use +### Install polyfills +```bash +npm install @webcomponents/webcomponentsjs +``` + +You can also load the code from a CDN such as unpkg: https://unpkg.com/@webcomponents/webcomponentsjs@2.0.0/ + +### Using `webcomponents-bundle.js` + +The `webcomponents-bundle.js` contains all of the web components polyfills and is +suitable for use on any supported browser. All of the polyfill code will be loaded +but each polyfill will only be used based on feature detection. +The bundle includes Custom Elements, Shady DOM/CSS and generic platform polyfills +(such as ES6 Promise, Constructable events, etc.) (needed by Internet Explorer 11), +and Template (needed by IE 11 and Edge). + +The `webcomponents-bundle.js` is very simple to use but it does load code +that is not needed on most modern browsers, slowing page load. For best performance, +use the `webcomponents-loader.js`. + +Here's an example: + +```html + + + + + + + + +``` + +### Using `webcomponents-loader.js` + +The `webcomponents-loader.js` is a client-side loader that dynamically loads the +minimum polyfill bundle, using feature detection. + +`webcomponents-loader.js` can be loaded synchronously, or asynchronously depending on your needs. + +#### Inlining + +If you have inlined the source of `webcomponent-loader.js`, then you should specify `window.WebComponents.root` as the root from which to load the polyfills. +For example: + +```html + +``` + +#### Synchronous +When loaded synchronously, `webcomponents-loader.js` behaves similarly to `webcomponents-bundle.js`. + +The appropriate bundle will be loaded with `document.write()` to ensure that WebComponent polyfills are available for subsequent scripts and modules. + +Here's an example: + +```html + + + + + + + + +``` + +#### Asynchronous +When loaded asychronously with the `defer` attribute, polyfill bundles will be loaded asynchronously, +which means that scripts and modules that depend on webcomponents APIs *must* be loaded +using `WebComponents.waitFor` function. + +The `WebComponents.waitFor` function takes a callback function as an argument, and will evaluate that callback after the polyfill bundle has been loaded. + +The callback function should load scripts that need the polyfills (typically via `import('my-script.js')`) and +should return a promise that resolves when all scripts have loaded. + +Here's an example: + +```html + + + + + + + + +``` + +The `WebComponents.waitFor` function may be called multiple times, and the callback functions will be processed in order. + +Here's a more complicated example: + +```html + + + + + + +``` + +### WebComponentsReady event + +The `WebComponentsReady` event is fired when polyfills and user scripts have loaded and custom elements have been upgraded. This event is generally not needed; however, it may be useful in some cases like testing. If imperative code should wait until a specific custom element definition has loaded, it can use the platform `customElements.whenDefined` API. + +### `custom-elements-es5-adapter.js` +According to the spec, only ES6 classes (https://html.spec.whatwg.org/multipage/scripting.html#custom-element-conformance) may be passed to the _native_ `customElements.define` API. For best performnace, ES6 should be served to browsers that support it, and ES5 code should be serve to those that don't. Since this may not always be possible, it may make sense to compile and serve ES5 to all browsers. However, if you do so, ES5-style custom element classes will now **not** work on browsers with native Custom Elements because ES5-style classes cannot properly extend ES6 classes, like `HTMLElement`. + +As a workaround, if your project has been compiled to ES5, load `custom-elements-es5-adapter.js` before defining Custom Elements. This adapter will automatically wrap ES5. + +**The adapter must NOT be compiled.** + +## Browser Support + +The polyfills are intended to work in the latest versions of evergreen browsers. See below +for our complete browser support matrix: + +| Polyfill | Edge | IE11+ | Chrome* | Firefox* | Safari 9+* | Chrome Android* | Mobile Safari* | +| ---------- |:----:|:-----:|:-------:|:--------:|:----------:|:---------------:|:--------------:| +| Custom Elements | ✓ | ✓ | ✓ | ✓ | ✓ | ✓| ✓ | +| Shady CSS/DOM | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | + +\*Indicates the current version of the browser + +The polyfills may work in older browsers, however require additional polyfills (such as classList, or other [platform](https://github.com/webcomponents/webcomponents-platform) +polyfills) to be used. We cannot guarantee support for browsers outside of our compatibility matrix. + + +### Manually Building + +If you wish to build the bundles yourself, you'll need `node` and `npm` on your system: + + * install [node.js](http://nodejs.org/) using the instructions on their website + * use `npm` to install [gulp.js](http://gulpjs.com/): `npm install -g gulp` + * make sure you have Java installed per https://www.npmjs.com/package/google-closure-compiler#java-version + +Now you are ready to build the polyfills with: + + # install dependencies + npm install + # build + npm run build + +The builds will be placed into the root directory. + +## Contribute + +See the [contributing guide](CONTRIBUTING.md) + +## License + +Everything in this repository is BSD style license unless otherwise specified. + +Copyright (c) 2015 The Polymer Authors. All rights reserved. + +## Changes in version 2.x + +* The HTML Imports polyfill has been removed. Given that ES modules have shipped in +most browsers, the expectation is that web components code will be loaded via +ES modules. +* When using `webcomponents-loader.js` with the `defer` attribute, scripts that rely on the polyfills *must* be loaded using `WebComponents.waitFor(loadCallback)`. + +## Known Issues + + * [ShadowDOM CSS is not encapsulated out of the box](#shadycss) + * [Custom element's constructor property is unreliable](#constructor) + * [Contenteditable elements do not trigger MutationObserver](#contentedit) + * [ShadyCSS: :host(.zot:not(.bar:nth-child(2))) doesn't work](#nestedparens) + +### ShadowDOM CSS is not encapsulated out of the box +The ShadowDOM polyfill is not able to encapsulate CSS in ShadowDOM out of the box. You need to use specific code from the ShadyCSS library, included with the polyfill. See [ShadyCSS instructions](https://github.com/webcomponents/shadycss). + +### Custom element's constructor property is unreliable +See [#215](https://github.com/webcomponents/webcomponentsjs/issues/215) for background. + +In Edge and IE, instances of Custom Elements have a `constructor` property of `HTMLUnknownElementConstructor` and `HTMLUnknownElement`, respectively. It's unsafe to rely on this property for checking element types. + +It's worth noting that `customElement.__proto__.__proto__.constructor` is `HTMLElementPrototype` and that the prototype chain isn't modified by the polyfills(onto `ElementPrototype`, etc.) + +### Contenteditable elements do not trigger MutationObserver +Using the MutationObserver polyfill, it isn't possible to monitor mutations of an element marked `contenteditable`. +See [the mailing list](https://groups.google.com/forum/#!msg/polymer-dev/LHdtRVXXVsA/v1sGoiTYWUkJ) + +### ShadyCSS: :host(.zot:not(.bar:nth-child(2))) doesn't work +ShadyCSS `:host()` rules can only have (at most) 1-level of nested parentheses in its argument selector under ShadyCSS. For example, `:host(.zot)` and `:host(.zot:not(.bar))` both work, but `:host(.zot:not(.bar:nth-child(2)))` does not. diff --git a/docs/build/gh-pages/node_modules/@webcomponents/webcomponentsjs/bundles/webcomponents-ce.js b/docs/build/gh-pages/node_modules/@webcomponents/webcomponentsjs/bundles/webcomponents-ce.js new file mode 100644 index 00000000..912be67f --- /dev/null +++ b/docs/build/gh-pages/node_modules/@webcomponents/webcomponentsjs/bundles/webcomponents-ce.js @@ -0,0 +1,56 @@ +/** +@license @nocompile +Copyright (c) 2018 The Polymer Project Authors. All rights reserved. +This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt +The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt +The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt +Code distributed by Google as part of the polymer project is also +subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt +*/ +(function(){'use strict';var aa=new Set("annotation-xml color-profile font-face font-face-src font-face-uri font-face-format font-face-name missing-glyph".split(" "));function g(b){var a=aa.has(b);b=/^[a-z][.0-9_a-z]*-[\-.0-9_a-z]*$/.test(b);return!a&&b}function l(b){var a=b.isConnected;if(void 0!==a)return a;for(;b&&!(b.__CE_isImportDocument||b instanceof Document);)b=b.parentNode||(window.ShadowRoot&&b instanceof ShadowRoot?b.host:void 0);return!(!b||!(b.__CE_isImportDocument||b instanceof Document))} +function p(b,a){for(;a&&a!==b&&!a.nextSibling;)a=a.parentNode;return a&&a!==b?a.nextSibling:null} +function q(b,a,d){d=void 0===d?new Set:d;for(var c=b;c;){if(c.nodeType===Node.ELEMENT_NODE){var e=c;a(e);var f=e.localName;if("link"===f&&"import"===e.getAttribute("rel")){c=e.import;if(c instanceof Node&&!d.has(c))for(d.add(c),c=c.firstChild;c;c=c.nextSibling)q(c,a,d);c=p(b,e);continue}else if("template"===f){c=p(b,e);continue}if(e=e.__CE_shadowRoot)for(e=e.firstChild;e;e=e.nextSibling)q(e,a,d)}c=c.firstChild?c.firstChild:p(b,c)}}function t(b,a,d){b[a]=d};function u(){this.a=new Map;this.f=new Map;this.c=[];this.b=!1}function ba(b,a,d){b.a.set(a,d);b.f.set(d.constructor,d)}function v(b,a){b.b=!0;b.c.push(a)}function w(b,a){b.b&&q(a,function(a){return x(b,a)})}function x(b,a){if(b.b&&!a.__CE_patched){a.__CE_patched=!0;for(var d=0;d=} visitedImports\n */\nexport function walkDeepDescendantElements(root, callback, visitedImports = new Set()) {\n let node = root;\n while (node) {\n if (node.nodeType === Node.ELEMENT_NODE) {\n const element = /** @type {!Element} */(node);\n\n callback(element);\n\n const localName = element.localName;\n if (localName === 'link' && element.getAttribute('rel') === 'import') {\n // If this import (polyfilled or not) has it's root node available,\n // walk it.\n const importNode = /** @type {!Node} */ (element.import);\n if (importNode instanceof Node && !visitedImports.has(importNode)) {\n // Prevent multiple walks of the same import root.\n visitedImports.add(importNode);\n\n for (let child = importNode.firstChild; child; child = child.nextSibling) {\n walkDeepDescendantElements(child, callback, visitedImports);\n }\n }\n\n // Ignore descendants of import links to prevent attempting to walk the\n // elements created by the HTML Imports polyfill that we just walked\n // above.\n node = nextSiblingOrAncestorSibling(root, element);\n continue;\n } else if (localName === 'template') {\n // Ignore descendants of templates. There shouldn't be any descendants\n // because they will be moved into `.content` during construction in\n // browsers that support template but, in case they exist and are still\n // waiting to be moved by a polyfill, they will be ignored.\n node = nextSiblingOrAncestorSibling(root, element);\n continue;\n }\n\n // Walk shadow roots.\n const shadowRoot = element.__CE_shadowRoot;\n if (shadowRoot) {\n for (let child = shadowRoot.firstChild; child; child = child.nextSibling) {\n walkDeepDescendantElements(child, callback, visitedImports);\n }\n }\n }\n\n node = nextNode(root, node);\n }\n}\n\n/**\n * Used to suppress Closure's \"Modifying the prototype is only allowed if the\n * constructor is in the same scope\" warning without using\n * `@suppress {newCheckTypes, duplicate}` because `newCheckTypes` is too broad.\n *\n * @param {!Object} destination\n * @param {string} name\n * @param {*} value\n */\nexport function setPropertyUnchecked(destination, name, value) {\n destination[name] = value;\n}\n","import * as Utilities from './Utilities.js';\nimport CEState from './CustomElementState.js';\n\nexport default class CustomElementInternals {\n constructor() {\n /** @type {!Map} */\n this._localNameToDefinition = new Map();\n\n /** @type {!Map} */\n this._constructorToDefinition = new Map();\n\n /** @type {!Array} */\n this._patches = [];\n\n /** @type {boolean} */\n this._hasPatches = false;\n }\n\n /**\n * @param {string} localName\n * @param {!CustomElementDefinition} definition\n */\n setDefinition(localName, definition) {\n this._localNameToDefinition.set(localName, definition);\n this._constructorToDefinition.set(definition.constructor, definition);\n }\n\n /**\n * @param {string} localName\n * @return {!CustomElementDefinition|undefined}\n */\n localNameToDefinition(localName) {\n return this._localNameToDefinition.get(localName);\n }\n\n /**\n * @param {!Function} constructor\n * @return {!CustomElementDefinition|undefined}\n */\n constructorToDefinition(constructor) {\n return this._constructorToDefinition.get(constructor);\n }\n\n /**\n * @param {!function(!Node)} listener\n */\n addPatch(listener) {\n this._hasPatches = true;\n this._patches.push(listener);\n }\n\n /**\n * @param {!Node} node\n */\n patchTree(node) {\n if (!this._hasPatches) return;\n\n Utilities.walkDeepDescendantElements(node, element => this.patch(element));\n }\n\n /**\n * @param {!Node} node\n */\n patch(node) {\n if (!this._hasPatches) return;\n\n if (node.__CE_patched) return;\n node.__CE_patched = true;\n\n for (let i = 0; i < this._patches.length; i++) {\n this._patches[i](node);\n }\n }\n\n /**\n * @param {!Node} root\n */\n connectTree(root) {\n const elements = [];\n\n Utilities.walkDeepDescendantElements(root, element => elements.push(element));\n\n for (let i = 0; i < elements.length; i++) {\n const element = elements[i];\n if (element.__CE_state === CEState.custom) {\n this.connectedCallback(element);\n } else {\n this.upgradeElement(element);\n }\n }\n }\n\n /**\n * @param {!Node} root\n */\n disconnectTree(root) {\n const elements = [];\n\n Utilities.walkDeepDescendantElements(root, element => elements.push(element));\n\n for (let i = 0; i < elements.length; i++) {\n const element = elements[i];\n if (element.__CE_state === CEState.custom) {\n this.disconnectedCallback(element);\n }\n }\n }\n\n /**\n * Upgrades all uncustomized custom elements at and below a root node for\n * which there is a definition. When custom element reaction callbacks are\n * assumed to be called synchronously (which, by the current DOM / HTML spec\n * definitions, they are *not*), callbacks for both elements customized\n * synchronously by the parser and elements being upgraded occur in the same\n * relative order.\n *\n * NOTE: This function, when used to simulate the construction of a tree that\n * is already created but not customized (i.e. by the parser), does *not*\n * prevent the element from reading the 'final' (true) state of the tree. For\n * example, the element, during truly synchronous parsing / construction would\n * see that it contains no children as they have not yet been inserted.\n * However, this function does not modify the tree, the element will\n * (incorrectly) have children. Additionally, self-modification restrictions\n * for custom element constructors imposed by the DOM spec are *not* enforced.\n *\n *\n * The following nested list shows the steps extending down from the HTML\n * spec's parsing section that cause elements to be synchronously created and\n * upgraded:\n *\n * The \"in body\" insertion mode:\n * https://html.spec.whatwg.org/multipage/syntax.html#parsing-main-inbody\n * - Switch on token:\n * .. other cases ..\n * -> Any other start tag\n * - [Insert an HTML element](below) for the token.\n *\n * Insert an HTML element:\n * https://html.spec.whatwg.org/multipage/syntax.html#insert-an-html-element\n * - Insert a foreign element for the token in the HTML namespace:\n * https://html.spec.whatwg.org/multipage/syntax.html#insert-a-foreign-element\n * - Create an element for a token:\n * https://html.spec.whatwg.org/multipage/syntax.html#create-an-element-for-the-token\n * - Will execute script flag is true?\n * - (Element queue pushed to the custom element reactions stack.)\n * - Create an element:\n * https://dom.spec.whatwg.org/#concept-create-element\n * - Sync CE flag is true?\n * - Constructor called.\n * - Self-modification restrictions enforced.\n * - Sync CE flag is false?\n * - (Upgrade reaction enqueued.)\n * - Attributes appended to element.\n * (`attributeChangedCallback` reactions enqueued.)\n * - Will execute script flag is true?\n * - (Element queue popped from the custom element reactions stack.\n * Reactions in the popped stack are invoked.)\n * - (Element queue pushed to the custom element reactions stack.)\n * - Insert the element:\n * https://dom.spec.whatwg.org/#concept-node-insert\n * - Shadow-including descendants are connected. During parsing\n * construction, there are no shadow-*excluding* descendants.\n * However, the constructor may have validly attached a shadow\n * tree to itself and added descendants to that shadow tree.\n * (`connectedCallback` reactions enqueued.)\n * - (Element queue popped from the custom element reactions stack.\n * Reactions in the popped stack are invoked.)\n *\n * @param {!Node} root\n * @param {{\n * visitedImports: (!Set|undefined),\n * upgrade: (!function(!Element)|undefined),\n * }=} options\n */\n patchAndUpgradeTree(root, options = {}) {\n const visitedImports = options.visitedImports || new Set();\n const upgrade = options.upgrade || (element => this.upgradeElement(element));\n\n const elements = [];\n\n const gatherElements = element => {\n if (element.localName === 'link' && element.getAttribute('rel') === 'import') {\n // The HTML Imports polyfill sets a descendant element of the link to\n // the `import` property, specifically this is *not* a Document.\n const importNode = /** @type {?Node} */ (element.import);\n\n if (importNode instanceof Node) {\n importNode.__CE_isImportDocument = true;\n // Connected links are associated with the registry.\n importNode.__CE_hasRegistry = true;\n }\n\n if (importNode && importNode.readyState === 'complete') {\n importNode.__CE_documentLoadHandled = true;\n } else {\n // If this link's import root is not available, its contents can't be\n // walked. Wait for 'load' and walk it when it's ready.\n element.addEventListener('load', () => {\n const importNode = /** @type {!Node} */ (element.import);\n\n if (importNode.__CE_documentLoadHandled) return;\n importNode.__CE_documentLoadHandled = true;\n\n // Clone the `visitedImports` set that was populated sync during\n // the `patchAndUpgradeTree` call that caused this 'load' handler to\n // be added. Then, remove *this* link's import node so that we can\n // walk that import again, even if it was partially walked later\n // during the same `patchAndUpgradeTree` call.\n const clonedVisitedImports = new Set(visitedImports);\n clonedVisitedImports.delete(importNode);\n\n this.patchAndUpgradeTree(importNode, {visitedImports: clonedVisitedImports, upgrade});\n });\n }\n } else {\n elements.push(element);\n }\n };\n\n // `walkDeepDescendantElements` populates (and internally checks against)\n // `visitedImports` when traversing a loaded import.\n Utilities.walkDeepDescendantElements(root, gatherElements, visitedImports);\n\n if (this._hasPatches) {\n for (let i = 0; i < elements.length; i++) {\n this.patch(elements[i]);\n }\n }\n\n for (let i = 0; i < elements.length; i++) {\n upgrade(elements[i]);\n }\n }\n\n /**\n * @param {!Element} element\n */\n upgradeElement(element) {\n const currentState = element.__CE_state;\n if (currentState !== undefined) return;\n\n // Prevent elements created in documents without a browsing context from\n // upgrading.\n //\n // https://html.spec.whatwg.org/multipage/custom-elements.html#look-up-a-custom-element-definition\n // \"If document does not have a browsing context, return null.\"\n //\n // https://html.spec.whatwg.org/multipage/window-object.html#dom-document-defaultview\n // \"The defaultView IDL attribute of the Document interface, on getting,\n // must return this Document's browsing context's WindowProxy object, if\n // this Document has an associated browsing context, or null otherwise.\"\n const ownerDocument = element.ownerDocument;\n if (\n !ownerDocument.defaultView &&\n !(ownerDocument.__CE_isImportDocument && ownerDocument.__CE_hasRegistry)\n ) return;\n\n const definition = this.localNameToDefinition(element.localName);\n if (!definition) return;\n\n definition.constructionStack.push(element);\n\n const constructor = definition.constructor;\n try {\n try {\n let result = new (constructor)();\n if (result !== element) {\n throw new Error('The custom element constructor did not produce the element being upgraded.');\n }\n } finally {\n definition.constructionStack.pop();\n }\n } catch (e) {\n element.__CE_state = CEState.failed;\n throw e;\n }\n\n element.__CE_state = CEState.custom;\n element.__CE_definition = definition;\n\n if (definition.attributeChangedCallback) {\n const observedAttributes = definition.observedAttributes;\n for (let i = 0; i < observedAttributes.length; i++) {\n const name = observedAttributes[i];\n const value = element.getAttribute(name);\n if (value !== null) {\n this.attributeChangedCallback(element, name, null, value, null);\n }\n }\n }\n\n if (Utilities.isConnected(element)) {\n this.connectedCallback(element);\n }\n }\n\n /**\n * @param {!Element} element\n */\n connectedCallback(element) {\n const definition = element.__CE_definition;\n if (definition.connectedCallback) {\n definition.connectedCallback.call(element);\n }\n }\n\n /**\n * @param {!Element} element\n */\n disconnectedCallback(element) {\n const definition = element.__CE_definition;\n if (definition.disconnectedCallback) {\n definition.disconnectedCallback.call(element);\n }\n }\n\n /**\n * @param {!Element} element\n * @param {string} name\n * @param {?string} oldValue\n * @param {?string} newValue\n * @param {?string} namespace\n */\n attributeChangedCallback(element, name, oldValue, newValue, namespace) {\n const definition = element.__CE_definition;\n if (\n definition.attributeChangedCallback &&\n definition.observedAttributes.indexOf(name) > -1\n ) {\n definition.attributeChangedCallback.call(element, name, oldValue, newValue, namespace);\n }\n }\n}\n","/**\n * @enum {number}\n */\nconst CustomElementState = {\n custom: 1,\n failed: 2,\n};\n\nexport default CustomElementState;\n","import CustomElementInternals from './CustomElementInternals.js';\n\nexport default class DocumentConstructionObserver {\n constructor(internals, doc) {\n /**\n * @type {!CustomElementInternals}\n */\n this._internals = internals;\n\n /**\n * @type {!Document}\n */\n this._document = doc;\n\n /**\n * @type {MutationObserver|undefined}\n */\n this._observer = undefined;\n\n\n // Simulate tree construction for all currently accessible nodes in the\n // document.\n this._internals.patchAndUpgradeTree(this._document);\n\n if (this._document.readyState === 'loading') {\n this._observer = new MutationObserver(this._handleMutations.bind(this));\n\n // Nodes created by the parser are given to the observer *before* the next\n // task runs. Inline scripts are run in a new task. This means that the\n // observer will be able to handle the newly parsed nodes before the inline\n // script is run.\n this._observer.observe(this._document, {\n childList: true,\n subtree: true,\n });\n }\n }\n\n disconnect() {\n if (this._observer) {\n this._observer.disconnect();\n }\n }\n\n /**\n * @param {!Array} mutations\n */\n _handleMutations(mutations) {\n // Once the document's `readyState` is 'interactive' or 'complete', all new\n // nodes created within that document will be the result of script and\n // should be handled by patching.\n const readyState = this._document.readyState;\n if (readyState === 'interactive' || readyState === 'complete') {\n this.disconnect();\n }\n\n for (let i = 0; i < mutations.length; i++) {\n const addedNodes = mutations[i].addedNodes;\n for (let j = 0; j < addedNodes.length; j++) {\n const node = addedNodes[j];\n this._internals.patchAndUpgradeTree(node);\n }\n }\n }\n}\n","import CustomElementInternals from './CustomElementInternals.js';\nimport DocumentConstructionObserver from './DocumentConstructionObserver.js';\nimport Deferred from './Deferred.js';\nimport * as Utilities from './Utilities.js';\n\n/**\n * @unrestricted\n */\nexport default class CustomElementRegistry {\n\n /**\n * @param {!CustomElementInternals} internals\n */\n constructor(internals) {\n /**\n * @private\n * @type {boolean}\n */\n this._elementDefinitionIsRunning = false;\n\n /**\n * @private\n * @type {!CustomElementInternals}\n */\n this._internals = internals;\n\n /**\n * @private\n * @type {!Map>}\n */\n this._whenDefinedDeferred = new Map();\n\n /**\n * The default flush callback triggers the document walk synchronously.\n * @private\n * @type {!Function}\n */\n this._flushCallback = fn => fn();\n\n /**\n * @private\n * @type {boolean}\n */\n this._flushPending = false;\n\n /**\n * @private\n * @type {!Array}\n */\n this._pendingDefinitions = [];\n\n /**\n * @private\n * @type {!DocumentConstructionObserver}\n */\n this._documentConstructionObserver = new DocumentConstructionObserver(internals, document);\n }\n\n /**\n * @param {string} localName\n * @param {!Function} constructor\n */\n define(localName, constructor) {\n if (!(constructor instanceof Function)) {\n throw new TypeError('Custom element constructors must be functions.');\n }\n\n if (!Utilities.isValidCustomElementName(localName)) {\n throw new SyntaxError(`The element name '${localName}' is not valid.`);\n }\n\n if (this._internals.localNameToDefinition(localName)) {\n throw new Error(`A custom element with name '${localName}' has already been defined.`);\n }\n\n if (this._elementDefinitionIsRunning) {\n throw new Error('A custom element is already being defined.');\n }\n this._elementDefinitionIsRunning = true;\n\n let connectedCallback;\n let disconnectedCallback;\n let adoptedCallback;\n let attributeChangedCallback;\n let observedAttributes;\n try {\n /** @type {!Object} */\n const prototype = constructor.prototype;\n if (!(prototype instanceof Object)) {\n throw new TypeError('The custom element constructor\\'s prototype is not an object.');\n }\n\n function getCallback(name) {\n const callbackValue = prototype[name];\n if (callbackValue !== undefined && !(callbackValue instanceof Function)) {\n throw new Error(`The '${name}' callback must be a function.`);\n }\n return callbackValue;\n }\n\n connectedCallback = getCallback('connectedCallback');\n disconnectedCallback = getCallback('disconnectedCallback');\n adoptedCallback = getCallback('adoptedCallback');\n attributeChangedCallback = getCallback('attributeChangedCallback');\n observedAttributes = constructor['observedAttributes'] || [];\n } catch (e) {\n return;\n } finally {\n this._elementDefinitionIsRunning = false;\n }\n\n const definition = {\n localName,\n constructor,\n connectedCallback,\n disconnectedCallback,\n adoptedCallback,\n attributeChangedCallback,\n observedAttributes,\n constructionStack: [],\n };\n\n this._internals.setDefinition(localName, definition);\n this._pendingDefinitions.push(definition);\n\n // If we've already called the flush callback and it hasn't called back yet,\n // don't call it again.\n if (!this._flushPending) {\n this._flushPending = true;\n this._flushCallback(() => this._flush());\n }\n }\n\n upgrade(element) {\n this._internals.patchAndUpgradeTree(element);\n }\n\n _flush() {\n // If no new definitions were defined, don't attempt to flush. This could\n // happen if a flush callback keeps the function it is given and calls it\n // multiple times.\n if (this._flushPending === false) return;\n this._flushPending = false;\n\n const pendingDefinitions = this._pendingDefinitions;\n\n /**\n * Unupgraded elements with definitions that were defined *before* the last\n * flush, in document order.\n * @type {!Array}\n */\n const elementsWithStableDefinitions = [];\n\n /**\n * A map from `localName`s of definitions that were defined *after* the last\n * flush to unupgraded elements matching that definition, in document order.\n * @type {!Map>}\n */\n const elementsWithPendingDefinitions = new Map();\n for (let i = 0; i < pendingDefinitions.length; i++) {\n elementsWithPendingDefinitions.set(pendingDefinitions[i].localName, []);\n }\n\n this._internals.patchAndUpgradeTree(document, {\n upgrade: element => {\n // Ignore the element if it has already upgraded or failed to upgrade.\n if (element.__CE_state !== undefined) return;\n\n const localName = element.localName;\n\n // If there is an applicable pending definition for the element, add the\n // element to the list of elements to be upgraded with that definition.\n const pendingElements = elementsWithPendingDefinitions.get(localName);\n if (pendingElements) {\n pendingElements.push(element);\n // If there is *any other* applicable definition for the element, add it\n // to the list of elements with stable definitions that need to be upgraded.\n } else if (this._internals.localNameToDefinition(localName)) {\n elementsWithStableDefinitions.push(element);\n }\n },\n });\n\n // Upgrade elements with 'stable' definitions first.\n for (let i = 0; i < elementsWithStableDefinitions.length; i++) {\n this._internals.upgradeElement(elementsWithStableDefinitions[i]);\n }\n\n // Upgrade elements with 'pending' definitions in the order they were defined.\n while (pendingDefinitions.length > 0) {\n const definition = pendingDefinitions.shift();\n const localName = definition.localName;\n\n // Attempt to upgrade all applicable elements.\n const pendingUpgradableElements = elementsWithPendingDefinitions.get(definition.localName);\n for (let i = 0; i < pendingUpgradableElements.length; i++) {\n this._internals.upgradeElement(pendingUpgradableElements[i]);\n }\n\n // Resolve any promises created by `whenDefined` for the definition.\n const deferred = this._whenDefinedDeferred.get(localName);\n if (deferred) {\n deferred.resolve(undefined);\n }\n }\n }\n\n /**\n * @param {string} localName\n * @return {Function|undefined}\n */\n get(localName) {\n const definition = this._internals.localNameToDefinition(localName);\n if (definition) {\n return definition.constructor;\n }\n\n return undefined;\n }\n\n /**\n * @param {string} localName\n * @return {!Promise}\n */\n whenDefined(localName) {\n if (!Utilities.isValidCustomElementName(localName)) {\n return Promise.reject(new SyntaxError(`'${localName}' is not a valid custom element name.`));\n }\n\n const prior = this._whenDefinedDeferred.get(localName);\n if (prior) {\n return prior.toPromise();\n }\n\n const deferred = new Deferred();\n this._whenDefinedDeferred.set(localName, deferred);\n\n const definition = this._internals.localNameToDefinition(localName);\n // Resolve immediately only if the given local name has a definition *and*\n // the full document walk to upgrade elements with that local name has\n // already happened.\n if (definition && !this._pendingDefinitions.some(d => d.localName === localName)) {\n deferred.resolve(undefined);\n }\n\n return deferred.toPromise();\n }\n\n polyfillWrapFlushCallback(outer) {\n this._documentConstructionObserver.disconnect();\n const inner = this._flushCallback;\n this._flushCallback = flush => outer(() => inner(flush));\n }\n}\n\n// Closure compiler exports.\nwindow['CustomElementRegistry'] = CustomElementRegistry;\nCustomElementRegistry.prototype['define'] = CustomElementRegistry.prototype.define;\nCustomElementRegistry.prototype['upgrade'] = CustomElementRegistry.prototype.upgrade;\nCustomElementRegistry.prototype['get'] = CustomElementRegistry.prototype.get;\nCustomElementRegistry.prototype['whenDefined'] = CustomElementRegistry.prototype.whenDefined;\nCustomElementRegistry.prototype['polyfillWrapFlushCallback'] = CustomElementRegistry.prototype.polyfillWrapFlushCallback;\n","/**\n * @template T\n */\nexport default class Deferred {\n constructor() {\n /**\n * @private\n * @type {T|undefined}\n */\n this._value = undefined;\n\n /**\n * @private\n * @type {Function|undefined}\n */\n this._resolve = undefined;\n\n /**\n * @private\n * @type {!Promise}\n */\n this._promise = new Promise(resolve => {\n this._resolve = resolve;\n\n if (this._value) {\n resolve(this._value);\n }\n });\n }\n\n /**\n * @param {T} value\n */\n resolve(value) {\n if (this._value) {\n throw new Error('Already resolved.');\n }\n\n this._value = value;\n\n if (this._resolve) {\n this._resolve(value);\n }\n }\n\n /**\n * @return {!Promise}\n */\n toPromise() {\n return this._promise;\n }\n}\n","export default {\n Document_createElement: window.Document.prototype.createElement,\n Document_createElementNS: window.Document.prototype.createElementNS,\n Document_importNode: window.Document.prototype.importNode,\n Document_prepend: window.Document.prototype['prepend'],\n Document_append: window.Document.prototype['append'],\n DocumentFragment_prepend: window.DocumentFragment.prototype['prepend'],\n DocumentFragment_append: window.DocumentFragment.prototype['append'],\n Node_cloneNode: window.Node.prototype.cloneNode,\n Node_appendChild: window.Node.prototype.appendChild,\n Node_insertBefore: window.Node.prototype.insertBefore,\n Node_removeChild: window.Node.prototype.removeChild,\n Node_replaceChild: window.Node.prototype.replaceChild,\n Node_textContent: Object.getOwnPropertyDescriptor(window.Node.prototype, 'textContent'),\n Element_attachShadow: window.Element.prototype['attachShadow'],\n Element_innerHTML: Object.getOwnPropertyDescriptor(window.Element.prototype, 'innerHTML'),\n Element_getAttribute: window.Element.prototype.getAttribute,\n Element_setAttribute: window.Element.prototype.setAttribute,\n Element_removeAttribute: window.Element.prototype.removeAttribute,\n Element_getAttributeNS: window.Element.prototype.getAttributeNS,\n Element_setAttributeNS: window.Element.prototype.setAttributeNS,\n Element_removeAttributeNS: window.Element.prototype.removeAttributeNS,\n Element_insertAdjacentElement: window.Element.prototype['insertAdjacentElement'],\n Element_insertAdjacentHTML: window.Element.prototype['insertAdjacentHTML'],\n Element_prepend: window.Element.prototype['prepend'],\n Element_append: window.Element.prototype['append'],\n Element_before: window.Element.prototype['before'],\n Element_after: window.Element.prototype['after'],\n Element_replaceWith: window.Element.prototype['replaceWith'],\n Element_remove: window.Element.prototype['remove'],\n HTMLElement: window.HTMLElement,\n HTMLElement_innerHTML: Object.getOwnPropertyDescriptor(window.HTMLElement.prototype, 'innerHTML'),\n HTMLElement_insertAdjacentElement: window.HTMLElement.prototype['insertAdjacentElement'],\n HTMLElement_insertAdjacentHTML: window.HTMLElement.prototype['insertAdjacentHTML'],\n};\n","/**\n * This class exists only to work around Closure's lack of a way to describe\n * singletons. It represents the 'already constructed marker' used in custom\n * element construction stacks.\n *\n * https://html.spec.whatwg.org/#concept-already-constructed-marker\n */\nclass AlreadyConstructedMarker {}\n\nexport default new AlreadyConstructedMarker();\n","import Native from './Native.js';\nimport CustomElementInternals from '../CustomElementInternals.js';\nimport CEState from '../CustomElementState.js';\nimport AlreadyConstructedMarker from '../AlreadyConstructedMarker.js';\n\n/**\n * @param {!CustomElementInternals} internals\n */\nexport default function(internals) {\n window['HTMLElement'] = (function() {\n /**\n * @type {function(new: HTMLElement): !HTMLElement}\n */\n function HTMLElement() {\n // This should really be `new.target` but `new.target` can't be emulated\n // in ES5. Assuming the user keeps the default value of the constructor's\n // prototype's `constructor` property, this is equivalent.\n /** @type {!Function} */\n const constructor = this.constructor;\n\n const definition = internals.constructorToDefinition(constructor);\n if (!definition) {\n throw new Error('The custom element being constructed was not registered with `customElements`.');\n }\n\n const constructionStack = definition.constructionStack;\n\n if (constructionStack.length === 0) {\n const element = Native.Document_createElement.call(document, definition.localName);\n Object.setPrototypeOf(element, constructor.prototype);\n element.__CE_state = CEState.custom;\n element.__CE_definition = definition;\n internals.patch(element);\n return element;\n }\n\n const lastIndex = constructionStack.length - 1;\n const element = constructionStack[lastIndex];\n if (element === AlreadyConstructedMarker) {\n throw new Error('The HTMLElement constructor was either called reentrantly for this constructor or called multiple times.');\n }\n constructionStack[lastIndex] = AlreadyConstructedMarker;\n\n Object.setPrototypeOf(element, constructor.prototype);\n internals.patch(/** @type {!HTMLElement} */ (element));\n\n return element;\n }\n\n HTMLElement.prototype = Native.HTMLElement.prototype;\n // Safari 9 has `writable: false` on the propertyDescriptor\n // Make it writable so that TypeScript can patch up the\n // constructor in the ES5 compiled code.\n Object.defineProperty(HTMLElement.prototype, 'constructor', {\n writable: true,\n configurable: true,\n enumerable: false,\n value: HTMLElement\n });\n\n return HTMLElement;\n })();\n};\n","/**\n * @license\n * Copyright (c) 2016 The Polymer Project Authors. All rights reserved.\n * This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt\n * The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt\n * The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt\n * Code distributed by Google as part of the polymer project is also\n * subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt\n */\n\nimport CustomElementInternals from './CustomElementInternals.js';\nimport CustomElementRegistry from './CustomElementRegistry.js';\n\nimport PatchHTMLElement from './Patch/HTMLElement.js';\nimport PatchDocument from './Patch/Document.js';\nimport PatchDocumentFragment from './Patch/DocumentFragment.js';\nimport PatchNode from './Patch/Node.js';\nimport PatchElement from './Patch/Element.js';\n\nconst priorCustomElements = window['customElements'];\n\nif (!priorCustomElements ||\n priorCustomElements['forcePolyfill'] ||\n (typeof priorCustomElements['define'] != 'function') ||\n (typeof priorCustomElements['get'] != 'function')) {\n /** @type {!CustomElementInternals} */\n const internals = new CustomElementInternals();\n\n PatchHTMLElement(internals);\n PatchDocument(internals);\n PatchDocumentFragment(internals);\n PatchNode(internals);\n PatchElement(internals);\n\n // The main document is always associated with the registry.\n document.__CE_hasRegistry = true;\n\n /** @type {!CustomElementRegistry} */\n const customElements = new CustomElementRegistry(internals);\n\n Object.defineProperty(window, 'customElements', {\n configurable: true,\n enumerable: true,\n value: customElements,\n });\n}\n","import CustomElementInternals from '../../CustomElementInternals.js';\nimport * as Utilities from '../../Utilities.js';\n\n/**\n * @typedef {{\n * prepend: !function(...(!Node|string)),\n * append: !function(...(!Node|string)),\n * }}\n */\nlet ParentNodeNativeMethods;\n\n/**\n * @param {!CustomElementInternals} internals\n * @param {!Object} destination\n * @param {!ParentNodeNativeMethods} builtIn\n */\nexport default function(internals, destination, builtIn) {\n /**\n * @param {!function(...(!Node|string))} builtInMethod\n * @return {!function(...(!Node|string))}\n */\n function appendPrependPatch(builtInMethod) {\n return function(...nodes) {\n /**\n * A copy of `nodes`, with any DocumentFragment replaced by its children.\n * @type {!Array}\n */\n const flattenedNodes = [];\n\n /**\n * Elements in `nodes` that were connected before this call.\n * @type {!Array}\n */\n const connectedElements = [];\n\n for (var i = 0; i < nodes.length; i++) {\n const node = nodes[i];\n\n if (node instanceof Element && Utilities.isConnected(node)) {\n connectedElements.push(node);\n }\n\n if (node instanceof DocumentFragment) {\n for (let child = node.firstChild; child; child = child.nextSibling) {\n flattenedNodes.push(child);\n }\n } else {\n flattenedNodes.push(node);\n }\n }\n\n builtInMethod.apply(this, nodes);\n\n for (let i = 0; i < connectedElements.length; i++) {\n internals.disconnectTree(connectedElements[i]);\n }\n\n if (Utilities.isConnected(this)) {\n for (let i = 0; i < flattenedNodes.length; i++) {\n const node = flattenedNodes[i];\n if (node instanceof Element) {\n internals.connectTree(node);\n }\n }\n }\n };\n }\n\n if (builtIn.prepend !== undefined) {\n Utilities.setPropertyUnchecked(destination, 'prepend', appendPrependPatch(builtIn.prepend));\n }\n\n if (builtIn.append !== undefined) {\n Utilities.setPropertyUnchecked(destination, 'append', appendPrependPatch(builtIn.append));\n }\n};\n","import Native from './Native.js';\nimport CustomElementInternals from '../CustomElementInternals.js';\nimport * as Utilities from '../Utilities.js';\n\nimport PatchParentNode from './Interface/ParentNode.js';\n\n/**\n * @param {!CustomElementInternals} internals\n */\nexport default function(internals) {\n Utilities.setPropertyUnchecked(Document.prototype, 'createElement',\n /**\n * @this {Document}\n * @param {string} localName\n * @return {!Element}\n */\n function(localName) {\n // Only create custom elements if this document is associated with the registry.\n if (this.__CE_hasRegistry) {\n const definition = internals.localNameToDefinition(localName);\n if (definition) {\n return new (definition.constructor)();\n }\n }\n\n const result = /** @type {!Element} */\n (Native.Document_createElement.call(this, localName));\n internals.patch(result);\n return result;\n });\n\n Utilities.setPropertyUnchecked(Document.prototype, 'importNode',\n /**\n * @this {Document}\n * @param {!Node} node\n * @param {boolean=} deep\n * @return {!Node}\n */\n function(node, deep) {\n const clone = Native.Document_importNode.call(this, node, deep);\n // Only create custom elements if this document is associated with the registry.\n if (!this.__CE_hasRegistry) {\n internals.patchTree(clone);\n } else {\n internals.patchAndUpgradeTree(clone);\n }\n return clone;\n });\n\n const NS_HTML = \"http://www.w3.org/1999/xhtml\";\n\n Utilities.setPropertyUnchecked(Document.prototype, 'createElementNS',\n /**\n * @this {Document}\n * @param {?string} namespace\n * @param {string} localName\n * @return {!Element}\n */\n function(namespace, localName) {\n // Only create custom elements if this document is associated with the registry.\n if (this.__CE_hasRegistry && (namespace === null || namespace === NS_HTML)) {\n const definition = internals.localNameToDefinition(localName);\n if (definition) {\n return new (definition.constructor)();\n }\n }\n\n const result = /** @type {!Element} */\n (Native.Document_createElementNS.call(this, namespace, localName));\n internals.patch(result);\n return result;\n });\n\n PatchParentNode(internals, Document.prototype, {\n prepend: Native.Document_prepend,\n append: Native.Document_append,\n });\n};\n","import Native from './Native.js';\nimport CustomElementInternals from '../CustomElementInternals.js';\nimport * as Utilities from '../Utilities.js';\n\n/**\n * @param {!CustomElementInternals} internals\n */\nexport default function(internals) {\n // `Node#nodeValue` is implemented on `Attr`.\n // `Node#textContent` is implemented on `Attr`, `Element`.\n\n Utilities.setPropertyUnchecked(Node.prototype, 'insertBefore',\n /**\n * @this {Node}\n * @param {!Node} node\n * @param {?Node} refNode\n * @return {!Node}\n */\n function(node, refNode) {\n if (node instanceof DocumentFragment) {\n const insertedNodes = Array.prototype.slice.apply(node.childNodes);\n const nativeResult = Native.Node_insertBefore.call(this, node, refNode);\n\n // DocumentFragments can't be connected, so `disconnectTree` will never\n // need to be called on a DocumentFragment's children after inserting it.\n\n if (Utilities.isConnected(this)) {\n for (let i = 0; i < insertedNodes.length; i++) {\n internals.connectTree(insertedNodes[i]);\n }\n }\n\n return nativeResult;\n }\n\n const nodeWasConnected = Utilities.isConnected(node);\n const nativeResult = Native.Node_insertBefore.call(this, node, refNode);\n\n if (nodeWasConnected) {\n internals.disconnectTree(node);\n }\n\n if (Utilities.isConnected(this)) {\n internals.connectTree(node);\n }\n\n return nativeResult;\n });\n\n Utilities.setPropertyUnchecked(Node.prototype, 'appendChild',\n /**\n * @this {Node}\n * @param {!Node} node\n * @return {!Node}\n */\n function(node) {\n if (node instanceof DocumentFragment) {\n const insertedNodes = Array.prototype.slice.apply(node.childNodes);\n const nativeResult = Native.Node_appendChild.call(this, node);\n\n // DocumentFragments can't be connected, so `disconnectTree` will never\n // need to be called on a DocumentFragment's children after inserting it.\n\n if (Utilities.isConnected(this)) {\n for (let i = 0; i < insertedNodes.length; i++) {\n internals.connectTree(insertedNodes[i]);\n }\n }\n\n return nativeResult;\n }\n\n const nodeWasConnected = Utilities.isConnected(node);\n const nativeResult = Native.Node_appendChild.call(this, node);\n\n if (nodeWasConnected) {\n internals.disconnectTree(node);\n }\n\n if (Utilities.isConnected(this)) {\n internals.connectTree(node);\n }\n\n return nativeResult;\n });\n\n Utilities.setPropertyUnchecked(Node.prototype, 'cloneNode',\n /**\n * @this {Node}\n * @param {boolean=} deep\n * @return {!Node}\n */\n function(deep) {\n const clone = Native.Node_cloneNode.call(this, deep);\n // Only create custom elements if this element's owner document is\n // associated with the registry.\n if (!this.ownerDocument.__CE_hasRegistry) {\n internals.patchTree(clone);\n } else {\n internals.patchAndUpgradeTree(clone);\n }\n return clone;\n });\n\n Utilities.setPropertyUnchecked(Node.prototype, 'removeChild',\n /**\n * @this {Node}\n * @param {!Node} node\n * @return {!Node}\n */\n function(node) {\n const nodeWasConnected = Utilities.isConnected(node);\n const nativeResult = Native.Node_removeChild.call(this, node);\n\n if (nodeWasConnected) {\n internals.disconnectTree(node);\n }\n\n return nativeResult;\n });\n\n Utilities.setPropertyUnchecked(Node.prototype, 'replaceChild',\n /**\n * @this {Node}\n * @param {!Node} nodeToInsert\n * @param {!Node} nodeToRemove\n * @return {!Node}\n */\n function(nodeToInsert, nodeToRemove) {\n if (nodeToInsert instanceof DocumentFragment) {\n const insertedNodes = Array.prototype.slice.apply(nodeToInsert.childNodes);\n const nativeResult = Native.Node_replaceChild.call(this, nodeToInsert, nodeToRemove);\n\n // DocumentFragments can't be connected, so `disconnectTree` will never\n // need to be called on a DocumentFragment's children after inserting it.\n\n if (Utilities.isConnected(this)) {\n internals.disconnectTree(nodeToRemove);\n for (let i = 0; i < insertedNodes.length; i++) {\n internals.connectTree(insertedNodes[i]);\n }\n }\n\n return nativeResult;\n }\n\n const nodeToInsertWasConnected = Utilities.isConnected(nodeToInsert);\n const nativeResult = Native.Node_replaceChild.call(this, nodeToInsert, nodeToRemove);\n const thisIsConnected = Utilities.isConnected(this);\n\n if (thisIsConnected) {\n internals.disconnectTree(nodeToRemove);\n }\n\n if (nodeToInsertWasConnected) {\n internals.disconnectTree(nodeToInsert);\n }\n\n if (thisIsConnected) {\n internals.connectTree(nodeToInsert);\n }\n\n return nativeResult;\n });\n\n\n function patch_textContent(destination, baseDescriptor) {\n Object.defineProperty(destination, 'textContent', {\n enumerable: baseDescriptor.enumerable,\n configurable: true,\n get: baseDescriptor.get,\n set: /** @this {Node} */ function(assignedValue) {\n // If this is a text node then there are no nodes to disconnect.\n if (this.nodeType === Node.TEXT_NODE) {\n baseDescriptor.set.call(this, assignedValue);\n return;\n }\n\n let removedNodes = undefined;\n // Checking for `firstChild` is faster than reading `childNodes.length`\n // to compare with 0.\n if (this.firstChild) {\n // Using `childNodes` is faster than `children`, even though we only\n // care about elements.\n const childNodes = this.childNodes;\n const childNodesLength = childNodes.length;\n if (childNodesLength > 0 && Utilities.isConnected(this)) {\n // Copying an array by iterating is faster than using slice.\n removedNodes = new Array(childNodesLength);\n for (let i = 0; i < childNodesLength; i++) {\n removedNodes[i] = childNodes[i];\n }\n }\n }\n\n baseDescriptor.set.call(this, assignedValue);\n\n if (removedNodes) {\n for (let i = 0; i < removedNodes.length; i++) {\n internals.disconnectTree(removedNodes[i]);\n }\n }\n },\n });\n }\n\n if (Native.Node_textContent && Native.Node_textContent.get) {\n patch_textContent(Node.prototype, Native.Node_textContent);\n } else {\n internals.addPatch(function(element) {\n patch_textContent(element, {\n enumerable: true,\n configurable: true,\n // NOTE: This implementation of the `textContent` getter assumes that\n // text nodes' `textContent` getter will not be patched.\n get: /** @this {Node} */ function() {\n /** @type {!Array} */\n const parts = [];\n\n for (let i = 0; i < this.childNodes.length; i++) {\n parts.push(this.childNodes[i].textContent);\n }\n\n return parts.join('');\n },\n set: /** @this {Node} */ function(assignedValue) {\n while (this.firstChild) {\n Native.Node_removeChild.call(this, this.firstChild);\n }\n Native.Node_appendChild.call(this, document.createTextNode(assignedValue));\n },\n });\n });\n }\n};\n","import CustomElementInternals from '../../CustomElementInternals.js';\nimport * as Utilities from '../../Utilities.js';\n\n/**\n * @typedef {{\n * before: !function(...(!Node|string)),\n * after: !function(...(!Node|string)),\n * replaceWith: !function(...(!Node|string)),\n * remove: !function(),\n * }}\n */\nlet ChildNodeNativeMethods;\n\n/**\n * @param {!CustomElementInternals} internals\n * @param {!Object} destination\n * @param {!ChildNodeNativeMethods} builtIn\n */\nexport default function(internals, destination, builtIn) {\n /**\n * @param {!function(...(!Node|string))} builtInMethod\n * @return {!function(...(!Node|string))}\n */\n function beforeAfterPatch(builtInMethod) {\n return function(...nodes) {\n /**\n * A copy of `nodes`, with any DocumentFragment replaced by its children.\n * @type {!Array}\n */\n const flattenedNodes = [];\n\n /**\n * Elements in `nodes` that were connected before this call.\n * @type {!Array}\n */\n const connectedElements = [];\n\n for (var i = 0; i < nodes.length; i++) {\n const node = nodes[i];\n\n if (node instanceof Element && Utilities.isConnected(node)) {\n connectedElements.push(node);\n }\n\n if (node instanceof DocumentFragment) {\n for (let child = node.firstChild; child; child = child.nextSibling) {\n flattenedNodes.push(child);\n }\n } else {\n flattenedNodes.push(node);\n }\n }\n\n builtInMethod.apply(this, nodes);\n\n for (let i = 0; i < connectedElements.length; i++) {\n internals.disconnectTree(connectedElements[i]);\n }\n\n if (Utilities.isConnected(this)) {\n for (let i = 0; i < flattenedNodes.length; i++) {\n const node = flattenedNodes[i];\n if (node instanceof Element) {\n internals.connectTree(node);\n }\n }\n }\n };\n }\n\n if (builtIn.before !== undefined) {\n Utilities.setPropertyUnchecked(destination, 'before', beforeAfterPatch(builtIn.before));\n }\n\n if (builtIn.before !== undefined) {\n Utilities.setPropertyUnchecked(destination, 'after', beforeAfterPatch(builtIn.after));\n }\n\n if (builtIn.replaceWith !== undefined) {\n Utilities.setPropertyUnchecked(destination, 'replaceWith',\n /**\n * @param {...(!Node|string)} nodes\n */\n function(...nodes) {\n /**\n * A copy of `nodes`, with any DocumentFragment replaced by its children.\n * @type {!Array}\n */\n const flattenedNodes = [];\n\n /**\n * Elements in `nodes` that were connected before this call.\n * @type {!Array}\n */\n const connectedElements = [];\n\n for (var i = 0; i < nodes.length; i++) {\n const node = nodes[i];\n\n if (node instanceof Element && Utilities.isConnected(node)) {\n connectedElements.push(node);\n }\n\n if (node instanceof DocumentFragment) {\n for (let child = node.firstChild; child; child = child.nextSibling) {\n flattenedNodes.push(child);\n }\n } else {\n flattenedNodes.push(node);\n }\n }\n\n const wasConnected = Utilities.isConnected(this);\n\n builtIn.replaceWith.apply(this, nodes);\n\n for (let i = 0; i < connectedElements.length; i++) {\n internals.disconnectTree(connectedElements[i]);\n }\n\n if (wasConnected) {\n internals.disconnectTree(this);\n for (let i = 0; i < flattenedNodes.length; i++) {\n const node = flattenedNodes[i];\n if (node instanceof Element) {\n internals.connectTree(node);\n }\n }\n }\n });\n }\n\n if (builtIn.remove !== undefined) {\n Utilities.setPropertyUnchecked(destination, 'remove',\n function() {\n const wasConnected = Utilities.isConnected(this);\n\n builtIn.remove.call(this);\n\n if (wasConnected) {\n internals.disconnectTree(this);\n }\n });\n }\n};\n","import Native from './Native.js';\nimport CustomElementInternals from '../CustomElementInternals.js';\nimport CEState from '../CustomElementState.js';\nimport * as Utilities from '../Utilities.js';\n\nimport PatchParentNode from './Interface/ParentNode.js';\nimport PatchChildNode from './Interface/ChildNode.js';\n\n/**\n * @param {!CustomElementInternals} internals\n */\nexport default function(internals) {\n if (Native.Element_attachShadow) {\n Utilities.setPropertyUnchecked(Element.prototype, 'attachShadow',\n /**\n * @this {Element}\n * @param {!{mode: string}} init\n * @return {ShadowRoot}\n */\n function(init) {\n const shadowRoot = Native.Element_attachShadow.call(this, init);\n this.__CE_shadowRoot = shadowRoot;\n return shadowRoot;\n });\n }\n\n\n function patch_innerHTML(destination, baseDescriptor) {\n Object.defineProperty(destination, 'innerHTML', {\n enumerable: baseDescriptor.enumerable,\n configurable: true,\n get: baseDescriptor.get,\n set: /** @this {Element} */ function(htmlString) {\n const isConnected = Utilities.isConnected(this);\n\n // NOTE: In IE11, when using the native `innerHTML` setter, all nodes\n // that were previously descendants of the context element have all of\n // their children removed as part of the set - the entire subtree is\n // 'disassembled'. This work around walks the subtree *before* using the\n // native setter.\n /** @type {!Array|undefined} */\n let removedElements = undefined;\n if (isConnected) {\n removedElements = [];\n Utilities.walkDeepDescendantElements(this, element => {\n if (element !== this) {\n removedElements.push(element);\n }\n });\n }\n\n baseDescriptor.set.call(this, htmlString);\n\n if (removedElements) {\n for (let i = 0; i < removedElements.length; i++) {\n const element = removedElements[i];\n if (element.__CE_state === CEState.custom) {\n internals.disconnectedCallback(element);\n }\n }\n }\n\n // Only create custom elements if this element's owner document is\n // associated with the registry.\n if (!this.ownerDocument.__CE_hasRegistry) {\n internals.patchTree(this);\n } else {\n internals.patchAndUpgradeTree(this);\n }\n return htmlString;\n },\n });\n }\n\n if (Native.Element_innerHTML && Native.Element_innerHTML.get) {\n patch_innerHTML(Element.prototype, Native.Element_innerHTML);\n } else if (Native.HTMLElement_innerHTML && Native.HTMLElement_innerHTML.get) {\n patch_innerHTML(HTMLElement.prototype, Native.HTMLElement_innerHTML);\n } else {\n\n internals.addPatch(function(element) {\n patch_innerHTML(element, {\n enumerable: true,\n configurable: true,\n // Implements getting `innerHTML` by performing an unpatched `cloneNode`\n // of the element and returning the resulting element's `innerHTML`.\n // TODO: Is this too expensive?\n get: /** @this {Element} */ function() {\n return Native.Node_cloneNode.call(this, true).innerHTML;\n },\n // Implements setting `innerHTML` by creating an unpatched element,\n // setting `innerHTML` of that element and replacing the target\n // element's children with those of the unpatched element.\n set: /** @this {Element} */ function(assignedValue) {\n // NOTE: re-route to `content` for `template` elements.\n // We need to do this because `template.appendChild` does not\n // route into `template.content`.\n const isTemplate = (this.localName === 'template');\n /** @type {!Node} */\n const content = isTemplate ? (/** @type {!HTMLTemplateElement} */\n (this)).content : this;\n /** @type {!Node} */\n const rawElement = Native.Document_createElementNS.call(document,\n this.namespaceURI, this.localName);\n rawElement.innerHTML = assignedValue;\n\n while (content.childNodes.length > 0) {\n Native.Node_removeChild.call(content, content.childNodes[0]);\n }\n const container = isTemplate ? rawElement.content : rawElement;\n while (container.childNodes.length > 0) {\n Native.Node_appendChild.call(content, container.childNodes[0]);\n }\n },\n });\n });\n }\n\n\n Utilities.setPropertyUnchecked(Element.prototype, 'setAttribute',\n /**\n * @this {Element}\n * @param {string} name\n * @param {string} newValue\n */\n function(name, newValue) {\n // Fast path for non-custom elements.\n if (this.__CE_state !== CEState.custom) {\n return Native.Element_setAttribute.call(this, name, newValue);\n }\n\n const oldValue = Native.Element_getAttribute.call(this, name);\n Native.Element_setAttribute.call(this, name, newValue);\n newValue = Native.Element_getAttribute.call(this, name);\n internals.attributeChangedCallback(this, name, oldValue, newValue, null);\n });\n\n Utilities.setPropertyUnchecked(Element.prototype, 'setAttributeNS',\n /**\n * @this {Element}\n * @param {?string} namespace\n * @param {string} name\n * @param {string} newValue\n */\n function(namespace, name, newValue) {\n // Fast path for non-custom elements.\n if (this.__CE_state !== CEState.custom) {\n return Native.Element_setAttributeNS.call(this, namespace, name, newValue);\n }\n\n const oldValue = Native.Element_getAttributeNS.call(this, namespace, name);\n Native.Element_setAttributeNS.call(this, namespace, name, newValue);\n newValue = Native.Element_getAttributeNS.call(this, namespace, name);\n internals.attributeChangedCallback(this, name, oldValue, newValue, namespace);\n });\n\n Utilities.setPropertyUnchecked(Element.prototype, 'removeAttribute',\n /**\n * @this {Element}\n * @param {string} name\n */\n function(name) {\n // Fast path for non-custom elements.\n if (this.__CE_state !== CEState.custom) {\n return Native.Element_removeAttribute.call(this, name);\n }\n\n const oldValue = Native.Element_getAttribute.call(this, name);\n Native.Element_removeAttribute.call(this, name);\n if (oldValue !== null) {\n internals.attributeChangedCallback(this, name, oldValue, null, null);\n }\n });\n\n Utilities.setPropertyUnchecked(Element.prototype, 'removeAttributeNS',\n /**\n * @this {Element}\n * @param {?string} namespace\n * @param {string} name\n */\n function(namespace, name) {\n // Fast path for non-custom elements.\n if (this.__CE_state !== CEState.custom) {\n return Native.Element_removeAttributeNS.call(this, namespace, name);\n }\n\n const oldValue = Native.Element_getAttributeNS.call(this, namespace, name);\n Native.Element_removeAttributeNS.call(this, namespace, name);\n // In older browsers, `Element#getAttributeNS` may return the empty string\n // instead of null if the attribute does not exist. For details, see;\n // https://developer.mozilla.org/en-US/docs/Web/API/Element/getAttributeNS#Notes\n const newValue = Native.Element_getAttributeNS.call(this, namespace, name);\n if (oldValue !== newValue) {\n internals.attributeChangedCallback(this, name, oldValue, newValue, namespace);\n }\n });\n\n\n function patch_insertAdjacentElement(destination, baseMethod) {\n Utilities.setPropertyUnchecked(destination, 'insertAdjacentElement',\n /**\n * @this {Element}\n * @param {string} position\n * @param {!Element} element\n * @return {?Element}\n */\n function(position, element) {\n const wasConnected = Utilities.isConnected(element);\n const insertedElement = /** @type {!Element} */\n (baseMethod.call(this, position, element));\n\n if (wasConnected) {\n internals.disconnectTree(element);\n }\n\n if (Utilities.isConnected(insertedElement)) {\n internals.connectTree(element);\n }\n return insertedElement;\n });\n }\n\n if (Native.HTMLElement_insertAdjacentElement) {\n patch_insertAdjacentElement(HTMLElement.prototype, Native.HTMLElement_insertAdjacentElement);\n } else if (Native.Element_insertAdjacentElement) {\n patch_insertAdjacentElement(Element.prototype, Native.Element_insertAdjacentElement);\n } else {\n console.warn('Custom Elements: `Element#insertAdjacentElement` was not patched.');\n }\n\n\n function patch_insertAdjacentHTML(destination, baseMethod) {\n /**\n * Patches and upgrades all nodes which are siblings between `start`\n * (inclusive) and `end` (exclusive). If `end` is `null`, then all siblings\n * following `start` will be patched and upgraded.\n * @param {!Node} start\n * @param {?Node} end\n */\n function upgradeNodesInRange(start, end) {\n const nodes = [];\n for (let node = start; node !== end; node = node.nextSibling) {\n nodes.push(node);\n }\n for (let i = 0; i < nodes.length; i++) {\n internals.patchAndUpgradeTree(nodes[i]);\n }\n }\n\n Utilities.setPropertyUnchecked(destination, 'insertAdjacentHTML',\n /**\n * @this {Element}\n * @param {string} position\n * @param {string} text\n */\n function(position, text) {\n position = position.toLowerCase();\n\n if (position === \"beforebegin\") {\n const marker = this.previousSibling;\n baseMethod.call(this, position, text);\n upgradeNodesInRange(\n /** @type {!Node} */ (marker || this.parentNode.firstChild), this);\n } else if (position === \"afterbegin\") {\n const marker = this.firstChild;\n baseMethod.call(this, position, text);\n upgradeNodesInRange(/** @type {!Node} */ (this.firstChild), marker);\n } else if (position === \"beforeend\") {\n const marker = this.lastChild;\n baseMethod.call(this, position, text);\n upgradeNodesInRange(marker || this.firstChild, null);\n } else if (position === \"afterend\") {\n const marker = this.nextSibling;\n baseMethod.call(this, position, text);\n upgradeNodesInRange(/** @type {!Node} */ (this.nextSibling), marker);\n } else {\n throw new SyntaxError(`The value provided (${String(position)}) is ` +\n \"not one of 'beforebegin', 'afterbegin', 'beforeend', or 'afterend'.\");\n }\n });\n }\n\n if (Native.HTMLElement_insertAdjacentHTML) {\n patch_insertAdjacentHTML(HTMLElement.prototype, Native.HTMLElement_insertAdjacentHTML);\n } else if (Native.Element_insertAdjacentHTML) {\n patch_insertAdjacentHTML(Element.prototype, Native.Element_insertAdjacentHTML);\n } else {\n console.warn('Custom Elements: `Element#insertAdjacentHTML` was not patched.');\n }\n\n\n PatchParentNode(internals, Element.prototype, {\n prepend: Native.Element_prepend,\n append: Native.Element_append,\n });\n\n PatchChildNode(internals, Element.prototype, {\n before: Native.Element_before,\n after: Native.Element_after,\n replaceWith: Native.Element_replaceWith,\n remove: Native.Element_remove,\n });\n};\n","import CustomElementInternals from '../CustomElementInternals.js';\nimport Native from './Native.js';\nimport PatchParentNode from './Interface/ParentNode.js';\n\n/**\n * @param {!CustomElementInternals} internals\n */\nexport default function(internals) {\n PatchParentNode(internals, DocumentFragment.prototype, {\n prepend: Native.DocumentFragment_prepend,\n append: Native.DocumentFragment_append,\n });\n};\n"]} \ No newline at end of file diff --git a/docs/build/gh-pages/node_modules/@webcomponents/webcomponentsjs/bundles/webcomponents-sd-ce-pf.js b/docs/build/gh-pages/node_modules/@webcomponents/webcomponentsjs/bundles/webcomponents-sd-ce-pf.js new file mode 100644 index 00000000..15c3ff69 --- /dev/null +++ b/docs/build/gh-pages/node_modules/@webcomponents/webcomponentsjs/bundles/webcomponents-sd-ce-pf.js @@ -0,0 +1,273 @@ +/** +@license @nocompile +Copyright (c) 2018 The Polymer Project Authors. All rights reserved. +This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt +The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt +The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt +Code distributed by Google as part of the polymer project is also +subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt +*/ +(function(){/* + + Copyright (c) 2016 The Polymer Project Authors. All rights reserved. + This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt + The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt + The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt + Code distributed by Google as part of the polymer project is also + subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt +*/ +'use strict';var r,aa="function"==typeof Object.defineProperties?Object.defineProperty:function(a,b,c){a!=Array.prototype&&a!=Object.prototype&&(a[b]=c.value)},fa="undefined"!=typeof window&&window===this?this:"undefined"!=typeof global&&null!=global?global:this;function ha(){ha=function(){};fa.Symbol||(fa.Symbol=ia)}var ia=function(){var a=0;return function(b){return"jscomp_symbol_"+(b||"")+a++}}(); +function ja(){ha();var a=fa.Symbol.iterator;a||(a=fa.Symbol.iterator=fa.Symbol("iterator"));"function"!=typeof Array.prototype[a]&&aa(Array.prototype,a,{configurable:!0,writable:!0,value:function(){return ka(this)}});ja=function(){}}function ka(a){var b=0;return la(function(){return b\x20\t\r\n\f]+)/i.exec(b)|| +["",""])[1].toLowerCase()];if(c)for(var d=0;d"+b+"";U.body.innerHTML=b;for(a.a(U);this.content.firstChild;)k.call(this.content,this.content.firstChild);b=U.body;if(c)for(d=0;d"+this.innerHTML+""},set:function(a){if(this.parentNode){U.body.innerHTML=a;for(a=this.ownerDocument.createDocumentFragment();U.body.firstChild;)l.call(a, +U.body.firstChild);n.call(this.parentNode,a,this)}else throw Error("Failed to set the 'outerHTML' property on 'Element': This element has no parent node.");},configurable:!0})};m(a.prototype);y(a.prototype);a.a=function(c){c=b(c,"template");for(var d=0,e=c.length,f;d]/g,Na=function(a){switch(a){case "&":return"&";case "<":return"<";case ">":return">";case '"':return""";case "\u00a0":return" "}};q=function(a){for(var b={},c=0;c";break a;case Node.TEXT_NODE:h=h.data;h=k&&Oa[k.localName]?h:h.replace(zb,Na);break a; +case Node.COMMENT_NODE:h="\x3c!--"+h.data+"--\x3e";break a;default:throw window.console.error(h),Error("not implemented");}}c+=h}return c}}if(c||yb){a.b=function(a,b){var c=f.call(a,!1);this.R&&this.R(c);b&&(l.call(c.content,f.call(a.content,!0)),Pa(c.content,a.content));return c};var Pa=function(c,d){if(d.querySelectorAll&&(d=b(d,"template"),0!==d.length)){c=b(c,"template");for(var e=0,f=c.length,g,h;e]/g;function ic(a){switch(a){case "&":return"&";case "<":return"<";case ">":return">";case '"':return""";case "\u00a0":return" "}}function jc(a){for(var b={},c=0;c";break a;case Node.TEXT_NODE:h=h.data;h=k&&lc[k.localName]?h:h.replace(hc,ic);break a;case Node.COMMENT_NODE:h="\x3c!--"+h.data+"--\x3e";break a;default:throw window.console.error(h), +Error("not implemented");}}c+=h}return c};var D=document.createTreeWalker(document,NodeFilter.SHOW_ALL,null,!1),E=document.createTreeWalker(document,NodeFilter.SHOW_ELEMENT,null,!1);function nc(a){var b=[];D.currentNode=a;for(a=D.firstChild();a;)b.push(a),a=D.nextSibling();return b} +var F={parentNode:function(a){D.currentNode=a;return D.parentNode()},firstChild:function(a){D.currentNode=a;return D.firstChild()},lastChild:function(a){D.currentNode=a;return D.lastChild()},previousSibling:function(a){D.currentNode=a;return D.previousSibling()},nextSibling:function(a){D.currentNode=a;return D.nextSibling()}};F.childNodes=nc;F.parentElement=function(a){E.currentNode=a;return E.parentNode()};F.firstElementChild=function(a){E.currentNode=a;return E.firstChild()}; +F.lastElementChild=function(a){E.currentNode=a;return E.lastChild()};F.previousElementSibling=function(a){E.currentNode=a;return E.previousSibling()};F.nextElementSibling=function(a){E.currentNode=a;return E.nextSibling()};F.children=function(a){var b=[];E.currentNode=a;for(a=E.firstChild();a;)b.push(a),a=E.nextSibling();return Db(b)};F.innerHTML=function(a){return mc(a,function(a){return nc(a)})}; +F.textContent=function(a){switch(a.nodeType){case Node.ELEMENT_NODE:case Node.DOCUMENT_FRAGMENT_NODE:a=document.createTreeWalker(a,NodeFilter.SHOW_TEXT,null,!1);for(var b="",c;c=a.nextNode();)b+=c.nodeValue;return b;default:return a.nodeValue}};var oc=A.K,pc=[Node.prototype,Element.prototype,HTMLElement.prototype];function H(a){var b;a:{for(b=0;be.assignedNodes.length&&(e.ea=!0)}e.ea&&(e.ea=!1,Vd(this,c))}c=this.o;b=[];for(e=0;eb.indexOf(d))||b.push(d);for(c=0;c "+b}))}a=a.replace(Eg,function(a,b,c){return'[dir="'+c+'"] '+b+", "+b+'[dir="'+c+'"]'});return{value:a,Oa:b,stop:f}}function Cg(a,b){a=a.split(Fg);a[0]+=b;return a.join(Fg)} +function Bg(a,b){var c=a.match(Gg);return(c=c&&c[2].trim()||"")?c[0].match(Hg)?a.replace(Gg,function(a,c,f){return b+f}):c.split(Hg)[0]===b?c:Ig:a.replace(xg,b)}function Jg(a){a.selector===Kg&&(a.selector="html")}eg.prototype.c=function(a){return a.match(xg)?"":a.match(Ag)?this.b(a,Lg):Cg(a.trim(),Lg)};fa.Object.defineProperties(eg.prototype,{a:{configurable:!0,enumerable:!0,get:function(){return"style-scope"}}}); +var sg=/:(nth[-\w]+)\(([^)]+)\)/,Lg=":not(.style-scope)",qg=",",yg=/(^|[\s>+~]+)((?:\[.+?\]|[^\s>+~=[])+)/g,Hg=/[[.:#*]/,xg=":host",Kg=":root",Ag="::slotted",wg=new RegExp("^("+Ag+")"),Gg=/(:host)(?:\(((?:\([^)(]*\)|[^)(]*)+?)\))/,Dg=/(?:::slotted)(?:\(((?:\([^)(]*\)|[^)(]*)+?)\))/,Eg=/(.*):dir\((?:(ltr|rtl))\)/,og=".",Fg=":",ig="class",Ig="should_not_match",ug=/:(?:matches|any|-(?:webkit|moz)-any)/,W=new eg;function Mg(a,b,c,d,e){this.M=a||null;this.b=b||null;this.c=c||[];this.T=null;this.da=e||"";this.X=d||"";this.a=this.I=this.O=null}function X(a){return a?a.__styleInfo:null}function Ng(a,b){return a.__styleInfo=b}Mg.prototype.f=function(){return this.M};Mg.prototype._getStyleRules=Mg.prototype.f;function Og(a){var b=this.matches||this.matchesSelector||this.mozMatchesSelector||this.msMatchesSelector||this.oMatchesSelector||this.webkitMatchesSelector;return b&&b.call(this,a)}var Pg=navigator.userAgent.match("Trident");function Qg(){}function Rg(a){var b={},c=[],d=0;Sf(a,function(a){Sg(a);a.index=d++;a=a.B.cssText;for(var c;c=Mf.exec(a);){var e=c[1];":"!==c[2]&&(b[e]=!0)}},function(a){c.push(a)});a.b=c;a=[];for(var e in b)a.push(e);return a} +function Sg(a){if(!a.B){var b={},c={};Tg(a,c)&&(b.L=c,a.rules=null);b.cssText=a.parsedCssText.replace(Pf,"").replace(Kf,"");a.B=b}}function Tg(a,b){var c=a.B;if(c){if(c.L)return Object.assign(b,c.L),!0}else{c=a.parsedCssText;for(var d;a=Kf.exec(c);){d=(a[2]||a[3]).trim();if("inherit"!==d||"unset"!==d)b[a[1].trim()]=d;d=!0}return d}} +function Ug(a,b,c){b&&(b=0<=b.indexOf(";")?Vg(a,b,c):$f(b,function(b,e,f,g){if(!e)return b+g;(e=Ug(a,c[e],c))&&"initial"!==e?"apply-shim-inherit"===e&&(e="inherit"):e=Ug(a,c[f]||f,c)||f;return b+(e||"")+g}));return b&&b.trim()||""} +function Vg(a,b,c){b=b.split(";");for(var d=0,e,f;d *"===f||"html"===f,h=0===f.indexOf(":host")&&!g;"shady"===c&&(g=f===e+" > *."+e||-1!==f.indexOf("html"),h=!g&&0===f.indexOf(e));if(g||h)c=e,h&&(b.F||(b.F=pg(W,b,W.b,a?og+a:"",e)),c=b.F||e),d({sa:c,Va:h,vb:g})}}function Yg(a,b,c){var d={},e={};Sf(b,function(b){Xg(a,b,c,function(c){Og.call(a.lb||a,c.sa)&&(c.Va?Tg(b,d):Tg(b,e))})},null,!0);return{Za:e,Ta:d}} +function Zg(a,b,c,d){var e=bg(b),f=ng(e.is,e.X),g=new RegExp("(?:^|[^.#[:])"+(b.extends?"\\"+f.slice(0,-1)+"\\]":f)+"($|[.:[\\s>+~])"),h=X(b);e=h.M;h=h.da;var k=$g(e,d);return lg(b,e,function(b){var e="";b.B||Sg(b);b.B.cssText&&(e=Vg(a,b.B.cssText,c));b.cssText=e;if(!T&&!Uf(b)&&b.cssText){var h=e=b.cssText;null==b.xa&&(b.xa=Nf.test(e));if(b.xa)if(null==b.ga){b.ga=[];for(var l in k)h=k[l],h=h(e),e!==h&&(e=h,b.ga.push(l))}else{for(l=0;l=l._useCount&&l.parentNode&&l.parentNode.removeChild(l));T?e.a?(e.a.textContent=d,c=e.a):d&&(c=Vf(d, +h,a.shadowRoot,e.b)):c?c.parentNode||(Pg&&-1b&&-1==[34,35,60,62,63,96].indexOf(b)?a:encodeURIComponent(a)}function d(a){var b=a.charCodeAt(0);return 32b&&-1==[34,35,60,62,96].indexOf(b)?a:encodeURIComponent(a)}function e(a,e,g){function h(a){ba.push(a)}var k=e||"scheme start",w=0,q="",u=!1,R=!1,ba=[];a:for(;(void 0!=a[w-1]||0==w)&&!this.i;){var m=a[w];switch(k){case "scheme start":if(m&&p.test(m))q+= +m.toLowerCase(),k="scheme";else if(e){h("Invalid scheme.");break a}else{q="";k="no scheme";continue}break;case "scheme":if(m&&G.test(m))q+=m.toLowerCase();else if(":"==m){this.h=q;q="";if(e)break a;void 0!==l[this.h]&&(this.D=!0);k="file"==this.h?"relative":this.D&&g&&g.h==this.h?"relative or authority":this.D?"authority first slash":"scheme data"}else if(e){void 0!=m&&h("Code point not allowed in scheme: "+m);break a}else{q="";w=0;k="no scheme";continue}break;case "scheme data":"?"==m?(this.u="?", +k="query"):"#"==m?(this.C="#",k="fragment"):void 0!=m&&"\t"!=m&&"\n"!=m&&"\r"!=m&&(this.pa+=c(m));break;case "no scheme":if(g&&void 0!==l[g.h]){k="relative";continue}else h("Missing scheme."),f.call(this),this.i=!0;break;case "relative or authority":if("/"==m&&"/"==a[w+1])k="authority ignore slashes";else{h("Expected /, got: "+m);k="relative";continue}break;case "relative":this.D=!0;"file"!=this.h&&(this.h=g.h);if(void 0==m){this.j=g.j;this.s=g.s;this.l=g.l.slice();this.u=g.u;this.v=g.v;this.g=g.g; +break a}else if("/"==m||"\\"==m)"\\"==m&&h("\\ is an invalid code point."),k="relative slash";else if("?"==m)this.j=g.j,this.s=g.s,this.l=g.l.slice(),this.u="?",this.v=g.v,this.g=g.g,k="query";else if("#"==m)this.j=g.j,this.s=g.s,this.l=g.l.slice(),this.u=g.u,this.C="#",this.v=g.v,this.g=g.g,k="fragment";else{k=a[w+1];var y=a[w+2];if("file"!=this.h||!p.test(m)||":"!=k&&"|"!=k||void 0!=y&&"/"!=y&&"\\"!=y&&"?"!=y&&"#"!=y)this.j=g.j,this.s=g.s,this.v=g.v,this.g=g.g,this.l=g.l.slice(),this.l.pop();k= +"relative path";continue}break;case "relative slash":if("/"==m||"\\"==m)"\\"==m&&h("\\ is an invalid code point."),k="file"==this.h?"file host":"authority ignore slashes";else{"file"!=this.h&&(this.j=g.j,this.s=g.s,this.v=g.v,this.g=g.g);k="relative path";continue}break;case "authority first slash":if("/"==m)k="authority second slash";else{h("Expected '/', got: "+m);k="authority ignore slashes";continue}break;case "authority second slash":k="authority ignore slashes";if("/"!=m){h("Expected '/', got: "+ +m);continue}break;case "authority ignore slashes":if("/"!=m&&"\\"!=m){k="authority";continue}else h("Expected authority, got: "+m);break;case "authority":if("@"==m){u&&(h("@ already seen."),q+="%40");u=!0;for(m=0;m {\n const prop = Object.getOwnPropertyDescriptor(obj, name);\n return prop && prop.enumerable;\n });\n};\n\n// implement iterators for IE 11\nconst iterator = window.Symbol.iterator;\n\nif (!String.prototype[iterator] || !String.prototype.codePointAt) {\n /** @this {String} */\n String.prototype[iterator] = function*() {\n for (let i = 0; i < this.length; i++) {\n yield this[i];\n }\n }\n}\n\nif (!Set.prototype[iterator]) {\n /** @this {Set} */\n Set.prototype[iterator] = function*() {\n const temp = [];\n this.forEach((value) => {\n temp.push(value);\n });\n for (let i = 0; i < temp.length; i++) {\n yield temp[i];\n }\n };\n}\n\nif (!Map.prototype[iterator]) {\n /** @this {Map} */\n Map.prototype[iterator] = function*() {\n const entries = [];\n this.forEach((value, key) => {\n entries.push([key, value]);\n });\n for(let i = 0; i < entries.length; i++) {\n yield entries[i];\n }\n };\n}\n","/**\n * @license\n * Copyright (c) 2016 The Polymer Project Authors. All rights reserved.\n * This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt\n * The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt\n * The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt\n * Code distributed by Google as part of the polymer project is also\n * subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt\n */\n\n// minimal template polyfill\n(function() {\n 'use strict';\n\n var needsTemplate = (typeof HTMLTemplateElement === 'undefined');\n var brokenDocFragment = !(document.createDocumentFragment().cloneNode() instanceof DocumentFragment);\n var needsDocFrag = false;\n\n // NOTE: Replace DocumentFragment to work around IE11 bug that\n // causes children of a document fragment modified while\n // there is a mutation observer to not have a parentNode, or\n // have a broken parentNode (!?!)\n if (/Trident/.test(navigator.userAgent)) {\n (function() {\n\n needsDocFrag = true;\n\n var origCloneNode = Node.prototype.cloneNode;\n Node.prototype.cloneNode = function cloneNode(deep) {\n var newDom = origCloneNode.call(this, deep);\n if (this instanceof DocumentFragment) {\n newDom.__proto__ = DocumentFragment.prototype;\n }\n return newDom;\n };\n\n // IE's DocumentFragment querySelector code doesn't work when\n // called on an element instance\n DocumentFragment.prototype.querySelectorAll = HTMLElement.prototype.querySelectorAll;\n DocumentFragment.prototype.querySelector = HTMLElement.prototype.querySelector;\n\n Object.defineProperties(DocumentFragment.prototype, {\n 'nodeType': {\n get: function () {\n return Node.DOCUMENT_FRAGMENT_NODE;\n },\n configurable: true\n },\n\n 'localName': {\n get: function () {\n return undefined;\n },\n configurable: true\n },\n\n 'nodeName': {\n get: function () {\n return '#document-fragment';\n },\n configurable: true\n }\n });\n\n var origInsertBefore = Node.prototype.insertBefore;\n function insertBefore(newNode, refNode) {\n if (newNode instanceof DocumentFragment) {\n var child;\n while ((child = newNode.firstChild)) {\n origInsertBefore.call(this, child, refNode);\n }\n } else {\n origInsertBefore.call(this, newNode, refNode);\n }\n return newNode;\n }\n Node.prototype.insertBefore = insertBefore;\n\n var origAppendChild = Node.prototype.appendChild;\n Node.prototype.appendChild = function appendChild(child) {\n if (child instanceof DocumentFragment) {\n insertBefore.call(this, child, null);\n } else {\n origAppendChild.call(this, child);\n }\n return child;\n };\n\n var origRemoveChild = Node.prototype.removeChild;\n var origReplaceChild = Node.prototype.replaceChild;\n Node.prototype.replaceChild = function replaceChild(newChild, oldChild) {\n if (newChild instanceof DocumentFragment) {\n insertBefore.call(this, newChild, oldChild);\n origRemoveChild.call(this, oldChild);\n } else {\n origReplaceChild.call(this, newChild, oldChild);\n }\n return oldChild;\n };\n\n Document.prototype.createDocumentFragment = function createDocumentFragment() {\n var frag = this.createElement('df');\n frag.__proto__ = DocumentFragment.prototype;\n return frag;\n };\n\n var origImportNode = Document.prototype.importNode;\n Document.prototype.importNode = function importNode(impNode, deep) {\n deep = deep || false;\n var newNode = origImportNode.call(this, impNode, deep);\n if (impNode instanceof DocumentFragment) {\n newNode.__proto__ = DocumentFragment.prototype;\n }\n return newNode;\n };\n })();\n }\n\n // NOTE: we rely on this cloneNode not causing element upgrade.\n // This means this polyfill must load before the CE polyfill and\n // this would need to be re-worked if a browser supports native CE\n // but not