ayo/wcb
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

chore: update readme

Browse source
This commit is contained in:
Ayo 2023-11-19 00:41:01 +01:00
parent e7b86df07b
commit ac6827e4cb
1 changed files with 6 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
README.md
View file

@ -31,7 +31,7 @@ The result is a reactive UI on property changes.
Import using [unpkg](https://unpkg.com/web-component-base) in your vanilla JS component. We will use this in the rest of our [usage examples](#usage). Import using [unpkg](https://unpkg.com/web-component-base) in your vanilla JS component. We will use this in the rest of our [usage examples](#usage).
```js ```js
import WebComponent from "https://unpkg.com/web-component-base/index.js"; import WebComponent from "https://unpkg.com/web-component-base@latest/WebComponent.min.js";
``` ```
## Installation via npm ## Installation via npm
@ -47,7 +47,7 @@ In your component class:
```js ```js
// HelloWorld.mjs // HelloWorld.mjs
import WebComponent from "https://unpkg.com/web-component-base/index.js"; import WebComponent from "https://unpkg.com/web-component-base@latest/WebComponent.min.js";
class HelloWorld extends WebComponent { class HelloWorld extends WebComponent {
static properties = ["my-name", "emotion"]; static properties = ["my-name", "emotion"];
@ -151,7 +151,7 @@ Here is an example of using a custom element in a single .html file:
<head> <head>
<title>WC Base Test</title> <title>WC Base Test</title>
<script type="module"> <script type="module">
import WebComponent from "https://unpkg.com/web-component-base/index.js"; import WebComponent from "https://unpkg.com/web-component-base@latest/WebComponent.min.js";
class HelloWorld extends WebComponent { class HelloWorld extends WebComponent {
static properties = ["my-name"]; static properties = ["my-name"];
@ -184,7 +184,7 @@ Define behavior when certain events in the component's life cycle is triggered b
- Best for setting up the component - Best for setting up the component
```js ```js
import WebComponent from "https://unpkg.com/web-component-base/index.js"; import WebComponent from "https://unpkg.com/web-component-base@latest/WebComponent.min.js";
class ClickableText extends WebComponent { class ClickableText extends WebComponent {
// gets called when the component is used in an HTML document // gets called when the component is used in an HTML document
@ -221,7 +221,7 @@ class ClickableText extends WebComponent {
- best for undoing any setup done in `onInit()` - best for undoing any setup done in `onInit()`
```js ```js
import WebComponent from "https://unpkg.com/web-component-base/index.js"; import WebComponent from "https://unpkg.com/web-component-base@latest/WebComponent.min.js";
class ClickableText extends WebComponent { class ClickableText extends WebComponent {
@ -252,7 +252,7 @@ class ClickableText extends WebComponent {
- Triggered when an attribute value changed - Triggered when an attribute value changed
```js ```js
import WebComponent from "https://unpkg.com/web-component-base/index.js"; import WebComponent from "https://unpkg.com/web-component-base@latest/WebComponent.min.js";
class ClickableText extends WebComponent { class ClickableText extends WebComponent {
// gets called when an attribute value changes // gets called when an attribute value changes