diff --git a/README.md b/README.md index 6f839cf..398da45 100644 --- a/README.md +++ b/README.md @@ -93,7 +93,9 @@ This mental model attempts to reduce the cognitive complexity of authoring compo ## Prop Access -A `WebComponent.props` read-only property exists to provide easy access to *any* observed attribute. This works like [`HTMLElement.dataset`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dataset) except `dataset` is only for attributes prefixed with `data-*`. Assigning a value to a camelCase counterpart using `WebComponent.props` will call `this.setAttribute` for any attribute name, with or without the `data-*` prefix. +There is a `WebComponent.props` read-only property provided for easy access to *any* observed attribute. This works like [`HTMLElement.dataset`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dataset) except `dataset` is only for attributes prefixed with `data-*`. + +A camelCase counterpart using `props` will give read/write access to any attribute, with or without the `data-*` prefix. You can access attribute properties in two ways: 1. Use the camelCase counterpart: `this.props.myProp`, which is automatically filled. diff --git a/src/WebComponent.js b/src/WebComponent.js index 0083172..ff6f490 100644 --- a/src/WebComponent.js +++ b/src/WebComponent.js @@ -43,9 +43,9 @@ export class WebComponent extends HTMLElement { } /** - * Proxy object containing camelCase counterparts of observed attributes. + * Read-only property containing camelCase counterparts of observed attributes. * This works like HTMLElement.dataset except dataset is only for attributes prefixed with `data-`. - * Assigning a value to a camelCase counterpart using `props` will automatically call `this.setAttribute` under the hood for any attribute name, with or without the `data-` prefix. + * A camelCase counterpart using `WebComponent.props` will give read/write access to any attribute, with or without the `data-*` prefix. * @see https://www.npmjs.com/package/web-component-base#prop-access * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dataset * @@ -61,13 +61,17 @@ export class WebComponent extends HTMLElement { * } * } */ - props; + get props() { + return this.#props; + } + + #props; constructor() { super(); - if (!this.props) { + if (!this.#props) { const { props, ...clone } = this; - this.props = new Proxy(clone, this.#handler(this)); + this.#props = new Proxy(clone, this.#handler(this)); } }