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

chore: update readme -- don't use default export

Browse source
This commit is contained in:
Ayo 2023-11-30 21:30:37 +01:00
parent 1f57a4c428
commit 3066efa6ff
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

@ -40,7 +40,7 @@ The result is a reactive UI on property changes. [View on CodePen ↗](https://c
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@latest/WebComponent.min.js"; import { WebComponent } from "https://unpkg.com/web-component-base@latest/WebComponent.min.js";
``` ```
## Installation via npm ## Installation via npm
@ -56,7 +56,7 @@ In your component class:
```js ```js
// HelloWorld.mjs // HelloWorld.mjs
import WebComponent from "https://unpkg.com/web-component-base@latest/WebComponent.min.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"];
@ -153,7 +153,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@latest/WebComponent.min.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"];
@ -186,7 +186,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@latest/WebComponent.min.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
@ -223,7 +223,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@latest/WebComponent.min.js"; import { WebComponent } from "https://unpkg.com/web-component-base@latest/WebComponent.min.js";
class ClickableText extends WebComponent { class ClickableText extends WebComponent {
@ -250,7 +250,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@latest/WebComponent.min.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