rework event dispatching and fix back side css

examples/web-components-kitchen-sink/custom-elements.json

@@ -26,12 +26,6 @@
         }
       ],
       "properties": [
-        {
-          "name": "side",
-          "description": "A card setter can have side A or B",
-          "jsDoc": "/**\n   * A card setter can have side A or B\n   *\n   * @param {(\"A\"|\"B\")} value\n   */",
-          "type": "\"A\" | \"B\""
-        },
         {
           "name": "backSide",
           "description": "Indicates that the back of the card is shown",

examples/web-components-kitchen-sink/src/DemoWcCard.js

@@ -1,5 +1,5 @@
-/* eslint-disable no-underscore-dangle, import/extensions */
+/* eslint-disable import/extensions */
-import { Event } from 'global';
+import { CustomEvent } from 'global';
 import { LitElement, html } from 'lit-element';
 import { demoWcCardStyle } from './demoWcCardStyle.css.js';
 
@@ -15,36 +15,23 @@ import { demoWcCardStyle } from './demoWcCardStyle.css.js';
 export class DemoWcCard extends LitElement {
   static get properties() {
     return {
-      backSide: { type: Boolean, reflect: true, attribute: 'back-side' },
+      backSide: {
+        type: Boolean,
+        reflect: true,
+        attribute: 'back-side',
+      },
       header: { type: String },
       rows: { type: Object },
     };
   }
 
-  /**
-   * A card setter can have side A or B
-   *
-   * @param {("A"|"B")} value
-   */
-  set side(value) {
-    this.__side = value;
-    this.dispatchEvent(new Event('side-changed'));
-    this.requestUpdate();
-  }
-
-  /**
-   * @returns {("A"|"B")}
-   */
-  get side() {
-    return this.__side;
-  }
-
   static get styles() {
     return demoWcCardStyle;
   }
 
   constructor() {
     super();
+
     /**
      * Indicates that the back of the card is shown
      */
@@ -105,4 +92,10 @@ export class DemoWcCard extends LitElement {
       </div>
     `;
   }
+
+  updated(changedProperties) {
+    if (changedProperties.has('backSide') && changedProperties.get('backSide') !== undefined) {
+      this.dispatchEvent(new CustomEvent('side-changed'));
+    }
+  }
 }

examples/web-components-kitchen-sink/src/demoWcCardStyle.css.js

@@ -88,7 +88,7 @@ export const demoWcCardStyle = css`
     background: linear-gradient(141deg, #333 25%, #aaa 40%, #666 55%);
     color: var(--demo-wc-card-back-color, #fff);
     text-align: center;
-    transform: rotateY(180deg);
+    transform: rotateY(180deg) translate3d(0px, 0, 1px);
   }
 
   #back .note {