diff --git a/README.md b/README.md index 125229a..112538a 100644 --- a/README.md +++ b/README.md @@ -9,7 +9,7 @@ When you extend the `WebComponent` class for your component, you only have to define the `template` and `properties`. Any change in any property value will automatically cause just the component UI to render. -The result is a reactive UI on property changes. +The result is a reactive UI on property changes. [View on CodePen ↗](https://codepen.io/ayoayco-the-styleful/pen/ZEwoNOz?editors=1010)
Table of Contents @@ -140,12 +140,12 @@ Therefore, this will tell the browser that the UI needs a render if the attribut ### Alternatives The current alternatives are using what `HTMLElement` provides out-of-the-box, which are: -1. `HTMLElement.dataset` for attributes prefixed with `data-*`. Read more about this [`on MDN`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dataset). +1. `HTMLElement.dataset` for attributes prefixed with `data-*`. Read more about this [on MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dataset). 1. Methods for reading/writing attribute values: `setAttribute(...)` and `getAttribute(...)`; note that managing the attribute names as strings can be difficult as the code grows. ## Quick Start Example -Here is an example of using a custom element in a single .html file: +Here is an example of using a custom element in a single .html file. ```html diff --git a/src/WebComponent.js b/src/WebComponent.js index 056b6f8..65e1fcb 100644 --- a/src/WebComponent.js +++ b/src/WebComponent.js @@ -150,9 +150,8 @@ export class WebComponent extends HTMLElement { */ #initializeProps() { if (!this.#props) { - const { ...clone } = this; this.#props = new Proxy( - clone, + {}, this.#handler((key, value) => this.setAttribute(key, value)) ); }