Address review feedback

Author: Steve Orvell

packages/lit-dev-content/samples/properties/attributereflect/my-element.ts

@@ -3,15 +3,11 @@ import {customElement, property} from 'lit/decorators.js';
 
 @customElement('my-element')
 class MyElement extends LitElement {
-  @property({type: Boolean, reflect: true})
-  active: boolean = false;
-
-  @property({type: String, reflect: true, useDefault: true} as PropertyDeclaration)
-  variant = 'normal';
-
+  /* playground-fold */ 
   static styles = css`
     :host {
-      display: inline-block; padding: 4px;
+      display: inline-block; 
+      padding: 4px;
     }
     :host([active]) {
       font-weight: 800;
@@ -22,17 +18,25 @@ class MyElement extends LitElement {
     :host([variant="special"]) {
       border-radius: 8px; border: 4px solid red;
     }`;
+  /* playground-fold-end */  
+  @property({type: Boolean, reflect: true})
+  active: boolean = false;
+
+  @property({reflect: true, useDefault: true} as PropertyDeclaration)
+  variant = 'normal'; 
 
   render() {
     return html`
       <div><label>active: <input type="checkbox"
         .value="${this.active}"
-        @change="${(e: Event) => this.active = (e.target! as HTMLInputElement).checked}">
+        @change="${(e: {target: HTMLInputElement}) => 
+          this.active = e.target.checked}">
         ${this.active}
       </label></div>
       <div><label>variant: <input type="checkbox"
         .value="${this.variant === 'special'}"
-        @change="${(e: Event) => this.variant = (e.target! as HTMLInputElement).checked ? 'special' : 'normal'}">
+        @change="${(e: {target: HTMLInputElement}) => 
+          this.variant = e.target.checked ? 'special' : 'normal'}">
         ${this.variant}
       </label></div>
     `;