diff --git a/examples/polymer-cli/.eslintrc.js b/examples/polymer-cli/.eslintrc.js
new file mode 100644
index 000000000000..531436200f94
--- /dev/null
+++ b/examples/polymer-cli/.eslintrc.js
@@ -0,0 +1,7 @@
+module.exports = {
+ globals: {
+ Polymer: true,
+ customElements: true,
+ CustomEvent: true,
+ },
+};
diff --git a/examples/polymer-cli/src/separated-button/separated-button.html b/examples/polymer-cli/src/separated-button/separated-button.html
new file mode 100644
index 000000000000..8fc31ada6849
--- /dev/null
+++ b/examples/polymer-cli/src/separated-button/separated-button.html
@@ -0,0 +1,17 @@
+
+
+
+
+
+
+
+
diff --git a/examples/polymer-cli/src/separated-button/separated-button.js b/examples/polymer-cli/src/separated-button/separated-button.js
new file mode 100644
index 000000000000..5fbc2d615a04
--- /dev/null
+++ b/examples/polymer-cli/src/separated-button/separated-button.js
@@ -0,0 +1,26 @@
+import { uselessMixin } from './useless-mixin';
+
+export const separatedButton = superClass =>
+ class SeparatedButton extends uselessMixin(superClass) {
+ static get is() {
+ return 'separated-button';
+ }
+
+ static get properties() {
+ return {
+ title: {
+ type: String,
+ value: 'Click me:',
+ },
+ counter: {
+ type: Number,
+ value: 0,
+ },
+ };
+ }
+
+ async handleTap() {
+ this.counter += await Promise.resolve(1);
+ this.someMethod();
+ }
+ };
diff --git a/examples/polymer-cli/src/separated-button/useless-mixin.js b/examples/polymer-cli/src/separated-button/useless-mixin.js
new file mode 100644
index 000000000000..e7e2748ee3a8
--- /dev/null
+++ b/examples/polymer-cli/src/separated-button/useless-mixin.js
@@ -0,0 +1,12 @@
+export const uselessMixin = superClass =>
+ class UselessMixin extends superClass {
+ constructor() {
+ super();
+
+ this.eventType = 'test';
+ }
+
+ someMethod() {
+ this.dispatchEvent(new CustomEvent(this.eventType, { detail: 'test' }));
+ }
+ };
diff --git a/examples/polymer-cli/src/stories/index.js b/examples/polymer-cli/src/stories/index.js
index 7c80b84be23e..59533f131209 100644
--- a/examples/polymer-cli/src/stories/index.js
+++ b/examples/polymer-cli/src/stories/index.js
@@ -15,7 +15,9 @@ import {
import { document } from 'global';
import '../polymer-playground-app.html';
import '../playground-button.html';
+import '../separated-button/separated-button.html';
import './storybook-welcome-to-polymer.html';
+import { StringTemplateButton } from '../string-template-button';
storiesOf('Welcome', module).add(
'Welcome',
@@ -132,3 +134,7 @@ storiesOf('Addon Knobs', module)
`;
});
+
+storiesOf('Element definition types', module)
+ .add('separated js', () => '')
+ .add('string template', () => new StringTemplateButton());
diff --git a/examples/polymer-cli/src/string-template-button.js b/examples/polymer-cli/src/string-template-button.js
new file mode 100644
index 000000000000..362e2d50735c
--- /dev/null
+++ b/examples/polymer-cli/src/string-template-button.js
@@ -0,0 +1,28 @@
+export class StringTemplateButton extends Polymer.Element {
+ static get is() {
+ return 'string-template-button';
+ }
+
+ static get properties() {
+ return {
+ title: {
+ type: String,
+ value: 'Wow, I am inline',
+ },
+ counter: {
+ type: Number,
+ value: 0,
+ },
+ };
+ }
+
+ static get template() {
+ return '';
+ }
+
+ handleTap() {
+ this.counter += 1;
+ }
+}
+
+customElements.define(StringTemplateButton.is, StringTemplateButton);