@webreflection/elements 0.1.7 → 0.1.9

package/README.md

@@ -62,4 +62,17 @@ Enjoy 👋
 
 If your browser supports natively *HTML* custom elements builtin extends (i.e. Chrome/ium or Firefox based), and *HTML* is all you want/need to extend 'cause *SVG* custom elements do not exist natively on the Web, you can use [@webreflection/elements/native](./native.js) export instead, which offers the **exact same API** without any dependency, hence it's lightweight, easier to reason about, and natively wonderful.
 
-If you don't know if that's supported and you would like to feature detect this ability, you can pick the [@webreflection/elements/auto](./auto.js) export insted.
+If you don't know if that's supported and you would like to feature detect this ability, you can pick the [@webreflection/elements/auto](./auto.js) export insted, which uses a lazy load for Safari or any browser that wouldn't support builtins' extends.
+
+## Benefits around this module
+
+  * it is based on *Web Standard APIs* without requiring bloated polyfills
+  * it normalizes *Custom Elements* definition, without diverging between the *builtin extend* and the regular one:
+    * `define('my-link', class MyLink extend HTML.A {})` to extend `HTMLAnchorElement` (output: `<a is="my-link"></a>`)
+    * `define('my-el', class MyEl extend HTML.Element {})` to extend `HTMLElement` (output: `<my-el></my-el>`)
+    * elements are automatically upgraded once live on the DOM
+  * it simplifies creation of custom elements:
+    * elements can be created via `new MyLink()` or `new MyEl()`, reducing confusion around `document.createElement('a', { is: 'my-link' })` VS `document.createElement('my-el')`
+  * it simplifies styling of elements via `[is="ce-name"]` when attribute is present:
+    * combined with [@webreflection/element](https://github.com/WebReflection/element#readme) it helps creating custom elements builtins extend that will always reflect the `is` attribute
+

package/index.js

@@ -39,6 +39,7 @@ export const elements = {
     registry.set(name, constructor);
     wait(name).resolve(constructor);
 
+    //@ts-ignore
     const selector = constructor.tag === 'element' ? name : `[is="${name}"]`;
     query.push(selector);
     parse(document.querySelectorAll(selector));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webreflection/elements",
-  "version": "0.1.7",
+  "version": "0.1.9",
   "description": "HTML & SVG Custom Elements",
   "main": "index.js",
   "module": "index.js",
@@ -44,7 +44,7 @@
   "license": "MIT",
   "type": "module",
   "dependencies": {
-    "nonchalance": "^0.6.1",
+    "nonchalance": "^0.6.2",
     "qsa-observer": "^3.0.2"
   },
   "devDependencies": {