diff --git a/examples/web-components-kitchen-sink/custom-elements.json b/examples/web-components-kitchen-sink/custom-elements.json index 4b2a539083d..448e527aea8 100644 --- a/examples/web-components-kitchen-sink/custom-elements.json +++ b/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", diff --git a/examples/web-components-kitchen-sink/src/DemoWcCard.js b/examples/web-components-kitchen-sink/src/DemoWcCard.js index 6dc3c5e5990..d5e21a278b4 100644 --- a/examples/web-components-kitchen-sink/src/DemoWcCard.js +++ b/examples/web-components-kitchen-sink/src/DemoWcCard.js @@ -1,5 +1,5 @@ -/* eslint-disable no-underscore-dangle, import/extensions */ -import { Event } from 'global'; +/* eslint-disable import/extensions */ +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 { `; } + + updated(changedProperties) { + if (changedProperties.has('backSide') && changedProperties.get('backSide') !== undefined) { + this.dispatchEvent(new CustomEvent('side-changed')); + } + } } diff --git a/examples/web-components-kitchen-sink/src/demoWcCardStyle.css.js b/examples/web-components-kitchen-sink/src/demoWcCardStyle.css.js index 6dbc2f4ad36..100d02dc9d3 100644 --- a/examples/web-components-kitchen-sink/src/demoWcCardStyle.css.js +++ b/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 {