From a7a991522d429974bc4a0b2107bf62b98c04502e Mon Sep 17 00:00:00 2001
From: Kevin Schaaf <kschaaf@google.com>
Date: Fri, 18 Jan 2019 10:49:56 -0800
Subject: [PATCH 1/6] Update docs to reflect #454 change to remove accessor
 wrapping

Since we no longer wrap existing accessors, the language and example in #accessors-custom is updated to indicate the user must manually call `requestUpdate`.

In addition, since `noAccessor` is _only_ needed now in a pretty esoteric case (extending a superclass and changing metadata for a declared property _that also has a custom accessor_), the code example in that section is simplified.
---
 docs/_guide/properties.md | 50 +++++++++++----------------------------
 1 file changed, 14 insertions(+), 36 deletions(-)

diff --git a/docs/_guide/properties.md b/docs/_guide/properties.md
index eb296349..4394646e 100644
--- a/docs/_guide/properties.md
+++ b/docs/_guide/properties.md
@@ -387,68 +387,46 @@ Generated accessors automatically call `requestUpdate`, initiating an update if
 
 ### Create custom property accessors {#accessors-custom}
 
-To specify how getting and setting works for a property, create custom accessors:
+To specify how getting and setting works for a property, create custom accessors instead of using automatically generated accessors:
 
 ```js
 // Declare a property
 static get properties() { return { myProp: { type: String } }; }
 
 // Custom accessors
-set myProp(value) { ... /* Custom setter */ } 
+set myProp(value) {
+  // Capture old value
+  const oldValue = this.myProp;
+  // Implement custom setter logic
+  ...
+  // Pass the old value to request an update
+  this.requestUpdate('myProp', oldValue);
+} 
 get myProp() { ... /* Custom getter */ }
 
 ...
 
 // Later, set the property
-this.myProp = 'hi'; // Invokes generated accessor, which calls custom accessor
+this.myProp = 'hi'; // Invokes custom accessor
 ```
 
-When you create custom property accessors for a property, LitElement still generates its own accessors unless you specify otherwise ([see below](#accessors-noaccessor)). The generated setter:
-
-* Saves the previous property value.
-* Calls your custom setter.
-* Requests an update, supplying the property name and its old value to the update lifecycle.
+If your class defines custom property accessors for a declared property directly on its prototype (i.e., not inherited from a superclass), LitElement will not overwrite them with generated accessors.  Such custom setters must manually request an update, supplying the property name and its old value to the update lifecycle by calling `requestUpdate`.
 
 ### Prevent LitElement from generating a property accessor {#accessors-noaccessor}
 
-To prevent LitElement from generating property accessors, set `noAccessors` to `true` in the property declaration:
+To prevent LitElement from generating property accessors, set `noAccessor` to `true` in the property declaration:
 
 ```js
 static get properties() { return { 
   // Don't generate accessors for myProp
-  myProp: { type: Number, noAccessors: true } 
+  myProp: { type: Number, noAccessor: true } 
 
   // Do generate accessors for aProp
   aProp: { type: String }
 }; }
-
-// Create custom accessors for myProp
-set myProp(value) { this._myProp = Math.floor(value); } 
-get myProp() { return this._myProp; }
-
-updated(changedProperties) { ... /* no changedProperties entry for myProp */ }
-
-...
-// later...
-this.myProp = Math.random()*10; // Invokes custom setter; no generated setter
-this.aProp = 'hi'; // Invokes generated setter
 ```
 
-In the example above: 
-
-* No update request will be made when `this.myProp = ...` is executed.
-* The update requested as a result of `this.aProp = ...` will still capture `myProp`'s new value.
-* The change to `myProp` won't register in the element update lifecycle.
-
-To handle update requests and property options in a custom setter, call `this.requestUpdate('propertyName', oldValue)`:
-
-```js
-set myProp(value) { 
-  let oldValue = this._myProp;
-  this._myProp = Math.floor(value); 
-  this.requestUpdate('myProp', oldValue);
-} 
-```
+In rare cases, a subclass may need to change or add property options for a custom property accessor that exists on its superclass. In these cases, setting `noAccessor` to `true` will prevent LitElement from creating a generated accessor on the subclass that overwrites the superclass's custom accessor.
 
 **Example: Custom property accessors** 
 

From 38e516ce40a37e6eaaffddff9374b73107f949e2 Mon Sep 17 00:00:00 2001
From: Kate Jeffreys <katejeffreys@google.com>
Date: Mon, 28 Jan 2019 11:41:03 -0800
Subject: [PATCH 2/6] Code samples for accessors with subclassing

---
 docs/_guide/properties.md                     | 29 ++++++++-----
 .../accessorssubclassing/index.html           |  2 +
 .../properties/accessorssubclassing/index.ts  |  2 +-
 .../accessorssubclassing/manifest.json        |  2 +-
 .../accessorssubclassing/my-element.js        | 43 ++++++++++++++-----
 .../accessorssubclassing/sub-element.js       |  9 ++++
 .../accessorssubclassing/super-element.js     | 37 ----------------
 .../properties/customsetter/my-element.js     | 27 ++++--------
 8 files changed, 74 insertions(+), 77 deletions(-)
 create mode 100644 docs/_includes/projects/properties/accessorssubclassing/sub-element.js
 delete mode 100644 docs/_includes/projects/properties/accessorssubclassing/super-element.js

diff --git a/docs/_guide/properties.md b/docs/_guide/properties.md
index 4394646e..cc82395f 100644
--- a/docs/_guide/properties.md
+++ b/docs/_guide/properties.md
@@ -410,31 +410,40 @@ get myProp() { ... /* Custom getter */ }
 this.myProp = 'hi'; // Invokes custom accessor
 ```
 
-If your class defines custom property accessors for a declared property directly on its prototype (i.e., not inherited from a superclass), LitElement will not overwrite them with generated accessors.  Such custom setters must manually request an update, supplying the property name and its old value to the update lifecycle by calling `requestUpdate`.
+If your class defines custom property accessors for a declared property directly on its prototype (i.e., not inherited from a superclass), LitElement will not overwrite them with generated accessors. 
+
+A custom setter must manually request an update, supplying the property name and its old value to the update lifecycle by calling `requestUpdate`.
+
+**Example: Custom property accessors** 
+
+```js
+{% include projects/properties/customsetter/my-element.js %}
+```
+
+{% include project.html folder="properties/customsetter" openFile="my-element.js" %}
 
 ### Prevent LitElement from generating a property accessor {#accessors-noaccessor}
 
-To prevent LitElement from generating property accessors, set `noAccessor` to `true` in the property declaration:
+In rare cases, a subclass may need to change or add property options for a custom property that exists on its superclass.
+
+To prevent LitElement from generating a property accessor that overwrites the superclass's custom accessor, set `noAccessor` to `true` in the property declaration:
 
 ```js
 static get properties() { return { 
-  // Don't generate accessors for myProp
+  // Don't generate accessor for myProp
   myProp: { type: Number, noAccessor: true } 
-
-  // Do generate accessors for aProp
-  aProp: { type: String }
 }; }
 ```
 
-In rare cases, a subclass may need to change or add property options for a custom property accessor that exists on its superclass. In these cases, setting `noAccessor` to `true` will prevent LitElement from creating a generated accessor on the subclass that overwrites the superclass's custom accessor.
+**Example: Custom property accessors with subclassing** 
 
-**Example: Custom property accessors** 
+**Subclass element**
 
 ```js
-{% include projects/properties/customsetter/my-element.js %}
+{% include projects/properties/accessorssubclassing/sub-element.js %}
 ```
 
-{% include project.html folder="properties/customsetter" openFile="my-element.js" %}
+{% include project.html folder="properties/accessorssubclassing" openFile="sub-element.js" %}
 
 ## Configure property changes
 
diff --git a/docs/_includes/projects/properties/accessorssubclassing/index.html b/docs/_includes/projects/properties/accessorssubclassing/index.html
index 205b902b..032913e3 100644
--- a/docs/_includes/projects/properties/accessorssubclassing/index.html
+++ b/docs/_includes/projects/properties/accessorssubclassing/index.html
@@ -12,6 +12,8 @@
 
   <body>
     <my-element></my-element>
+    <sub-element></sub-element>
+
   </body>
 
 </html>
diff --git a/docs/_includes/projects/properties/accessorssubclassing/index.ts b/docs/_includes/projects/properties/accessorssubclassing/index.ts
index 63f0dd76..738e65cd 100644
--- a/docs/_includes/projects/properties/accessorssubclassing/index.ts
+++ b/docs/_includes/projects/properties/accessorssubclassing/index.ts
@@ -1,2 +1,2 @@
-import './super-element.js';
 import './my-element.js';
+import './sub-element.js';
diff --git a/docs/_includes/projects/properties/accessorssubclassing/manifest.json b/docs/_includes/projects/properties/accessorssubclassing/manifest.json
index 6c2bc4b9..464855f5 100644
--- a/docs/_includes/projects/properties/accessorssubclassing/manifest.json
+++ b/docs/_includes/projects/properties/accessorssubclassing/manifest.json
@@ -3,7 +3,7 @@
   "description": "lit-element code sample",
   "files": [
     "my-element.js",
-    "super-element.js",
+    "sub-element.js",
     "index.html",
     "index.ts"
   ],
diff --git a/docs/_includes/projects/properties/accessorssubclassing/my-element.js b/docs/_includes/projects/properties/accessorssubclassing/my-element.js
index c90bdda2..83b1cd2c 100644
--- a/docs/_includes/projects/properties/accessorssubclassing/my-element.js
+++ b/docs/_includes/projects/properties/accessorssubclassing/my-element.js
@@ -1,16 +1,39 @@
-import SuperElement from './super-element.js';
+import { LitElement, html } from 'lit-element';
 
-class MyElement extends SuperElement {  
-  static get properties() { return {}; };
-  
-  get prop1() {
-    return this._prop1;
+export class MyElement extends LitElement {
+  static get properties() { return {
+    prop1: { type: Number },
+  };}
+
+  set prop1(newVal) {
+    let oldVal = this._prop1;
+    this._prop1 = Math.floor(newVal);
+    this.requestUpdate('prop1', oldVal);
   }
 
-  set prop1(value) {
-    console.log('MyElement custom setter');
-    this._prop1 = Math.floor(value/10)*2;
+  get prop1() { return this._prop1; }
+
+  constructor() {
+    super();
+    this._prop1 = 0;
+  }
+
+  render() {
+    return html`<p>prop1: ${this.prop1}</p>
+
+    <button @click="${this.getNewVal}">change</button>
+  `;
+  }
+
+  updated(changedProperties) {
+    changedProperties.forEach((oldValue, propName) => {
+      console.log(`${propName} changed. oldValue: ${oldValue}`);
+    });
   }
-}
 
+  getNewVal() {
+    let newVal = Math.random()*10;
+    this.prop1 = newVal;
+  }
+}
 customElements.define('my-element', MyElement);
diff --git a/docs/_includes/projects/properties/accessorssubclassing/sub-element.js b/docs/_includes/projects/properties/accessorssubclassing/sub-element.js
new file mode 100644
index 00000000..477f16d4
--- /dev/null
+++ b/docs/_includes/projects/properties/accessorssubclassing/sub-element.js
@@ -0,0 +1,9 @@
+import { MyElement } from './my-element.js';
+
+class SubElement extends MyElement {  
+  static get properties() { return {
+    prop1: { reflectToAttribute: true, noAccessor: true }
+  }; }
+}
+
+customElements.define('sub-element', SubElement);
diff --git a/docs/_includes/projects/properties/accessorssubclassing/super-element.js b/docs/_includes/projects/properties/accessorssubclassing/super-element.js
deleted file mode 100644
index b2f346f2..00000000
--- a/docs/_includes/projects/properties/accessorssubclassing/super-element.js
+++ /dev/null
@@ -1,37 +0,0 @@
-import { LitElement, html } from 'lit-element';
-
-export class SuperElement extends LitElement {
-  static get properties() { return {
-    prop1: { type: Number }
-  };}
-
-  get prop1() {
-    console.log('custom getter');
-    return this._prop1;
-  }
-
-  set prop1(value) {
-    console.log('custom setter');
-    this._prop1 = Math.floor(value/10);
-  }
-
-  constructor() {
-    super();
-    this.prop1 = 0;
-  }
-
-  render() {
-    return html`
-      <p>prop1: ${this.prop1}</p>
-      <button @click="${this.changeProperty}">change property</button>
-    `;
-  }
-
-  changeProperty() {
-    let randy = Math.floor(Math.random()*100);
-    console.log('Setting to:', randy);
-    this.prop1 = randy;
-  }
-}
-
-customElements.define('super-element', SuperElement);
diff --git a/docs/_includes/projects/properties/customsetter/my-element.js b/docs/_includes/projects/properties/customsetter/my-element.js
index 8b042a85..bcfd3cbe 100644
--- a/docs/_includes/projects/properties/customsetter/my-element.js
+++ b/docs/_includes/projects/properties/customsetter/my-element.js
@@ -2,37 +2,30 @@ import { LitElement, html } from 'lit-element';
 
 class MyElement extends LitElement {
   static get properties() { return {
-    prop1: { type: Number, noAccessors: true },
-    prop2: { type: Number },
-    prop3: { type: Number, noAccessors: true },
+    prop1: { type: Number },
   };}
 
-  set prop1(newVal) { this._prop1 = Math.floor(newVal); }
-  set prop2(newVal) { this._prop2 = Math.floor(newVal); }
-  set prop3(newVal) {
-    let oldVal = this._prop3;
-    this._prop3 = Math.floor(newVal);
-    this.requestUpdate('prop3', oldVal);
+  // Custom setter for prop1
+  set prop1(newVal) {
+    let oldVal = this._prop1;
+    this._prop1 = Math.floor(newVal);
+    // Must
+    this.requestUpdate('prop1', oldVal);
   }
 
+
   get prop1() { return this._prop1; }
-  get prop2() { return this._prop2; }
-  get prop3() { return this._prop3; }
 
   constructor() {
     super();
     this._prop1 = 0;
-    this._prop2 = 0;
-    this._prop3 = 0;
   }
 
   render() {
     return html`
       <p>prop1: ${this.prop1}</p>
-      <p>prop2: ${this.prop2}</p>
-      <p>prop3: ${this.prop3}</p>
 
-      <button @click="${this.getNewVal}">change properties</button>
+      <button @click="${this.getNewVal}">change</button>
     `;
   }
 
@@ -45,8 +38,6 @@ class MyElement extends LitElement {
   getNewVal() {
     let newVal = Math.random()*10;
     this.prop1 = newVal;
-    this.prop2 = newVal;
-    this.prop3 = newVal;
   }
 }
 customElements.define('my-element', MyElement);

From a201bfe4d0e152f01f83e6271169dd5cbac00fee Mon Sep 17 00:00:00 2001
From: Justin Fagnani <justin@fagnani.com>
Date: Tue, 29 Jan 2019 16:09:18 -0500
Subject: [PATCH 3/6] Update docs/_guide/properties.md

Co-Authored-By: katejeffreys <katejeffreys@google.com>
---
 docs/_guide/properties.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/_guide/properties.md b/docs/_guide/properties.md
index cc82395f..60947c22 100644
--- a/docs/_guide/properties.md
+++ b/docs/_guide/properties.md
@@ -410,7 +410,7 @@ get myProp() { ... /* Custom getter */ }
 this.myProp = 'hi'; // Invokes custom accessor
 ```
 
-If your class defines custom property accessors for a declared property directly on its prototype (i.e., not inherited from a superclass), LitElement will not overwrite them with generated accessors. 
+If your class defines its own accessors for a property, LitElement will not overwrite them with generated accessors. If your class does not define accessors for a property, LitElement will generate them, even if a superclass has defined the property or accessors.```
 
 A custom setter must manually request an update, supplying the property name and its old value to the update lifecycle by calling `requestUpdate`.
 

From 5cb2d13f468d6cf5d4cc5b32b0fe4c2571b2c3d2 Mon Sep 17 00:00:00 2001
From: Justin Fagnani <justin@fagnani.com>
Date: Tue, 29 Jan 2019 16:10:30 -0500
Subject: [PATCH 4/6] Update docs/_guide/properties.md

Co-Authored-By: katejeffreys <katejeffreys@google.com>
---
 docs/_guide/properties.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/_guide/properties.md b/docs/_guide/properties.md
index 60947c22..008a60b7 100644
--- a/docs/_guide/properties.md
+++ b/docs/_guide/properties.md
@@ -412,7 +412,7 @@ this.myProp = 'hi'; // Invokes custom accessor
 
 If your class defines its own accessors for a property, LitElement will not overwrite them with generated accessors. If your class does not define accessors for a property, LitElement will generate them, even if a superclass has defined the property or accessors.```
 
-A custom setter must manually request an update, supplying the property name and its old value to the update lifecycle by calling `requestUpdate`.
+The setters that LitElement generates automatically call `requestUpdate`. If you write your own setter you must call `requestUpdate` manually, supplying the property name and its old value.
 
 **Example: Custom property accessors** 
 

From b1a5ead14351947a0c92e571f93b0ef27668bd8b Mon Sep 17 00:00:00 2001
From: Kate Jeffreys <katejeffreys@google.com>
Date: Tue, 29 Jan 2019 13:15:26 -0800
Subject: [PATCH 5/6] Feedback

---
 docs/_guide/properties.md                     | 22 +++++++++----------
 .../properties/customsetter/my-element.js     |  3 ++-
 2 files changed, 13 insertions(+), 12 deletions(-)

diff --git a/docs/_guide/properties.md b/docs/_guide/properties.md
index 008a60b7..2a6d465c 100644
--- a/docs/_guide/properties.md
+++ b/docs/_guide/properties.md
@@ -385,36 +385,36 @@ this.myProp = 'hi'; // invokes myProp's generated property accessor
 
 Generated accessors automatically call `requestUpdate`, initiating an update if one has not already begun.
 
-### Create custom property accessors {#accessors-custom}
+### Create your own property accessors {#accessors-custom}
 
-To specify how getting and setting works for a property, create custom accessors instead of using automatically generated accessors:
+To specify how getting and setting works for a property, you can define your own property accessors. For example:
 
 ```js
 // Declare a property
 static get properties() { return { myProp: { type: String } }; }
 
-// Custom accessors
+// Define accessors
 set myProp(value) {
   // Capture old value
   const oldValue = this.myProp;
-  // Implement custom setter logic
+  // Implement setter logic
   ...
   // Pass the old value to request an update
   this.requestUpdate('myProp', oldValue);
 } 
-get myProp() { ... /* Custom getter */ }
+get myProp() { ... }
 
 ...
 
 // Later, set the property
-this.myProp = 'hi'; // Invokes custom accessor
+this.myProp = 'hi'; // Invokes your accessor
 ```
 
-If your class defines its own accessors for a property, LitElement will not overwrite them with generated accessors. If your class does not define accessors for a property, LitElement will generate them, even if a superclass has defined the property or accessors.```
+If your class defines its own accessors for a property, LitElement will not overwrite them with generated accessors. If your class does not define accessors for a property, LitElement will generate them, even if a superclass has defined the property or accessors.
 
 The setters that LitElement generates automatically call `requestUpdate`. If you write your own setter you must call `requestUpdate` manually, supplying the property name and its old value.
 
-**Example: Custom property accessors** 
+**Example: Define your own property accessors** 
 
 ```js
 {% include projects/properties/customsetter/my-element.js %}
@@ -424,9 +424,9 @@ The setters that LitElement generates automatically call `requestUpdate`. If you
 
 ### Prevent LitElement from generating a property accessor {#accessors-noaccessor}
 
-In rare cases, a subclass may need to change or add property options for a custom property that exists on its superclass.
+In rare cases, a subclass may need to change or add property options for a property that exists on its superclass.
 
-To prevent LitElement from generating a property accessor that overwrites the superclass's custom accessor, set `noAccessor` to `true` in the property declaration:
+To prevent LitElement from generating a property accessor that overwrites the superclass's defined accessor, set `noAccessor` to `true` in the property declaration:
 
 ```js
 static get properties() { return { 
@@ -435,7 +435,7 @@ static get properties() { return {
 }; }
 ```
 
-**Example: Custom property accessors with subclassing** 
+**Example: Property accessors with subclassing** 
 
 **Subclass element**
 
diff --git a/docs/_includes/projects/properties/customsetter/my-element.js b/docs/_includes/projects/properties/customsetter/my-element.js
index bcfd3cbe..44f558b0 100644
--- a/docs/_includes/projects/properties/customsetter/my-element.js
+++ b/docs/_includes/projects/properties/customsetter/my-element.js
@@ -9,7 +9,8 @@ class MyElement extends LitElement {
   set prop1(newVal) {
     let oldVal = this._prop1;
     this._prop1 = Math.floor(newVal);
-    // Must
+    // Property setter must call requestUpdate for
+    // property changes to trigger an update cycle
     this.requestUpdate('prop1', oldVal);
   }
 

From 367d950caf0cc81c897659e9b9580740884608c1 Mon Sep 17 00:00:00 2001
From: Kate Jeffreys <katejeffreys@google.com>
Date: Mon, 4 Feb 2019 11:47:48 -0800
Subject: [PATCH 6/6] Update per feedback

---
 .../accessorssubclassing/index.html           |  4 +-
 .../properties/accessorssubclassing/index.ts  |  2 +-
 .../accessorssubclassing/manifest.json        |  2 +-
 .../accessorssubclassing/my-element.js        | 39 ------------------
 .../accessorssubclassing/sub-element.js       | 10 ++---
 .../accessorssubclassing/super-element.js     | 30 ++++++++++++++
 .../properties/customsetter/my-element.js     | 40 ++++++-------------
 7 files changed, 51 insertions(+), 76 deletions(-)
 delete mode 100644 docs/_includes/projects/properties/accessorssubclassing/my-element.js
 create mode 100644 docs/_includes/projects/properties/accessorssubclassing/super-element.js

diff --git a/docs/_includes/projects/properties/accessorssubclassing/index.html b/docs/_includes/projects/properties/accessorssubclassing/index.html
index 032913e3..3a5498d2 100644
--- a/docs/_includes/projects/properties/accessorssubclassing/index.html
+++ b/docs/_includes/projects/properties/accessorssubclassing/index.html
@@ -11,9 +11,7 @@
 </head>
 
   <body>
-    <my-element></my-element>
-    <sub-element></sub-element>
-
+    <sub-element prop="6.2344235"></sub-element>
   </body>
 
 </html>
diff --git a/docs/_includes/projects/properties/accessorssubclassing/index.ts b/docs/_includes/projects/properties/accessorssubclassing/index.ts
index 738e65cd..4c350674 100644
--- a/docs/_includes/projects/properties/accessorssubclassing/index.ts
+++ b/docs/_includes/projects/properties/accessorssubclassing/index.ts
@@ -1,2 +1,2 @@
-import './my-element.js';
+import './super-element.js';
 import './sub-element.js';
diff --git a/docs/_includes/projects/properties/accessorssubclassing/manifest.json b/docs/_includes/projects/properties/accessorssubclassing/manifest.json
index 464855f5..f99f3674 100644
--- a/docs/_includes/projects/properties/accessorssubclassing/manifest.json
+++ b/docs/_includes/projects/properties/accessorssubclassing/manifest.json
@@ -2,7 +2,7 @@
   "title": "lit-element code sample",
   "description": "lit-element code sample",
   "files": [
-    "my-element.js",
+    "super-element.js",
     "sub-element.js",
     "index.html",
     "index.ts"
diff --git a/docs/_includes/projects/properties/accessorssubclassing/my-element.js b/docs/_includes/projects/properties/accessorssubclassing/my-element.js
deleted file mode 100644
index 83b1cd2c..00000000
--- a/docs/_includes/projects/properties/accessorssubclassing/my-element.js
+++ /dev/null
@@ -1,39 +0,0 @@
-import { LitElement, html } from 'lit-element';
-
-export class MyElement extends LitElement {
-  static get properties() { return {
-    prop1: { type: Number },
-  };}
-
-  set prop1(newVal) {
-    let oldVal = this._prop1;
-    this._prop1 = Math.floor(newVal);
-    this.requestUpdate('prop1', oldVal);
-  }
-
-  get prop1() { return this._prop1; }
-
-  constructor() {
-    super();
-    this._prop1 = 0;
-  }
-
-  render() {
-    return html`<p>prop1: ${this.prop1}</p>
-
-    <button @click="${this.getNewVal}">change</button>
-  `;
-  }
-
-  updated(changedProperties) {
-    changedProperties.forEach((oldValue, propName) => {
-      console.log(`${propName} changed. oldValue: ${oldValue}`);
-    });
-  }
-
-  getNewVal() {
-    let newVal = Math.random()*10;
-    this.prop1 = newVal;
-  }
-}
-customElements.define('my-element', MyElement);
diff --git a/docs/_includes/projects/properties/accessorssubclassing/sub-element.js b/docs/_includes/projects/properties/accessorssubclassing/sub-element.js
index 477f16d4..873aec61 100644
--- a/docs/_includes/projects/properties/accessorssubclassing/sub-element.js
+++ b/docs/_includes/projects/properties/accessorssubclassing/sub-element.js
@@ -1,9 +1,9 @@
-import { MyElement } from './my-element.js';
+import { SuperElement } from './super-element.js';
 
-class SubElement extends MyElement {  
-  static get properties() { return {
-    prop1: { reflectToAttribute: true, noAccessor: true }
-  }; }
+class SubElement extends SuperElement {  
+  static get properties() { 
+    return { prop: { reflectToAttribute: true, noAccessor: true } };
+  }
 }
 
 customElements.define('sub-element', SubElement);
diff --git a/docs/_includes/projects/properties/accessorssubclassing/super-element.js b/docs/_includes/projects/properties/accessorssubclassing/super-element.js
new file mode 100644
index 00000000..58b30a58
--- /dev/null
+++ b/docs/_includes/projects/properties/accessorssubclassing/super-element.js
@@ -0,0 +1,30 @@
+import { LitElement, html } from 'lit-element';
+
+export class SuperElement extends LitElement {
+  static get properties() {
+    return { prop: { type: Number } };
+  }
+
+  set prop(val) {
+    let oldVal = this._prop;
+    this._prop = Math.floor(val);
+    this.requestUpdate('prop', oldVal);
+  }
+
+  get prop() { return this._prop; }
+
+  constructor() {
+    super();
+    this._prop = 0;
+  }
+
+  render() {
+    return html`  
+      <p>prop: ${this.prop}</p>
+      <button @click="${() => { this.prop = Math.random()*10; }}">
+        change prop
+      </button>
+  `;
+  }
+}
+customElements.define('super-element', SuperElement);
diff --git a/docs/_includes/projects/properties/customsetter/my-element.js b/docs/_includes/projects/properties/customsetter/my-element.js
index 44f558b0..74fc4077 100644
--- a/docs/_includes/projects/properties/customsetter/my-element.js
+++ b/docs/_includes/projects/properties/customsetter/my-element.js
@@ -1,44 +1,30 @@
 import { LitElement, html } from 'lit-element';
 
 class MyElement extends LitElement {
-  static get properties() { return {
-    prop1: { type: Number },
-  };}
-
-  // Custom setter for prop1
-  set prop1(newVal) {
-    let oldVal = this._prop1;
-    this._prop1 = Math.floor(newVal);
-    // Property setter must call requestUpdate for
-    // property changes to trigger an update cycle
-    this.requestUpdate('prop1', oldVal);
+  static get properties() { 
+    return { prop: { type: Number } };
   }
 
+  set prop(val) {
+    let oldVal = this._prop;
+    this._prop = Math.floor(val);
+    this.requestUpdate('prop', oldVal);
+  }
 
-  get prop1() { return this._prop1; }
+  get prop() { return this._prop; }
 
   constructor() {
     super();
-    this._prop1 = 0;
+    this._prop = 0;
   }
 
   render() {
     return html`
-      <p>prop1: ${this.prop1}</p>
-
-      <button @click="${this.getNewVal}">change</button>
+      <p>prop: ${this.prop}</p>
+      <button @click="${() =>  { this.prop = Math.random()*10; }}">
+        change prop
+      </button>
     `;
   }
-
-  updated(changedProperties) {
-    changedProperties.forEach((oldValue, propName) => {
-      console.log(`${propName} changed. oldValue: ${oldValue}`);
-    });
-  }
-
-  getNewVal() {
-    let newVal = Math.random()*10;
-    this.prop1 = newVal;
-  }
 }
 customElements.define('my-element', MyElement);