@webreflection/elements 0.1.0 → 0.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +5 -8
- package/package.json +2 -1
package/README.md
CHANGED
|
@@ -4,15 +4,16 @@ HTML & SVG Custom Elements, glueing [qsa-observer](https://github.com/WebReflect
|
|
|
4
4
|
|
|
5
5
|
```html
|
|
6
6
|
<script type="module">
|
|
7
|
+
|
|
7
8
|
import { elements, HTML, SVG } from 'https://esm.run/@webreflection/elements';
|
|
8
9
|
|
|
9
10
|
// same Custom Elements API
|
|
10
|
-
elements.whenDefined('
|
|
11
|
-
console.log('
|
|
11
|
+
elements.whenDefined('my-h1').then(Class => {
|
|
12
|
+
console.log(Class.name, 'defined');
|
|
12
13
|
});
|
|
13
14
|
|
|
14
15
|
// native extends out of the box
|
|
15
|
-
elements.define('
|
|
16
|
+
elements.define('my-h1', class MyH1 extends HTML.H1 {
|
|
16
17
|
// anything that works with classes works here
|
|
17
18
|
#private;
|
|
18
19
|
|
|
@@ -30,12 +31,8 @@ HTML & SVG Custom Elements, glueing [qsa-observer](https://github.com/WebReflect
|
|
|
30
31
|
}
|
|
31
32
|
});
|
|
32
33
|
|
|
33
|
-
// automatic upgrades per element
|
|
34
|
-
elements.whenDefined('header').then(() => {
|
|
35
|
-
console.log('header defined');
|
|
36
|
-
});
|
|
37
34
|
</script>
|
|
38
|
-
<h1 is="
|
|
35
|
+
<h1 is="my-h1"></h1>
|
|
39
36
|
```
|
|
40
37
|
|
|
41
38
|
Enjoy 👋
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@webreflection/elements",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.1",
|
|
4
4
|
"description": "HTML & SVG Custom Elements",
|
|
5
5
|
"main": "index.js",
|
|
6
6
|
"scripts": {
|
|
@@ -8,6 +8,7 @@
|
|
|
8
8
|
},
|
|
9
9
|
"exports": {
|
|
10
10
|
".": "./index.js",
|
|
11
|
+
"./native": "./native.js",
|
|
11
12
|
"./package.json": "./package.json",
|
|
12
13
|
"./min": "./min.js"
|
|
13
14
|
},
|