@techexp/webitem 0.5.3 → 0.7.0

package/README-dev.md

@@ -5,13 +5,13 @@ This file contains info to help the developer of the library.
 
 ## Project Directory Structure
 
-1. The root of the project conatins these files
+1. The root of the project contains these files
     1. `.ackrc`: Config for [Ack](https://beyondgrep.com/) grep tool
     2. `.editorconfig`: Config for [EditorConfig](https://editorconfig.org/)
     3. `.eslintrc`: ES Lint customized rules
     4. `.gitignore`: List of files to be ignored by git
     5. `.npmrc`: Configuration for npm.
-    6. `LICENSE`: License file, usaing Apache v 2.0
+    6. `LICENSE`: License file, using Apache v 2.0
     7. `package.json`, `package-lock.json`: NPM package definition.
     8. `README.md`: Info about using the library.
     9. `README-dev.md`: This file.

package/README.md

@@ -4,7 +4,7 @@ A library to simplify creating HTML5 Web Components (Custom Elements).
 ## Introduction
 In modern HTML, you can create web components using
 [customElements.define()](https://developer.mozilla.org/en-US/docs/Web/Web_Components).
-This API is powerfull, but can be verbose and complicated. The _webitem.js_ library provides a wrapper
+This API is powerful, but can be verbose and complicated. The _webitem.js_ library provides a wrapper
 around that API in an attempt to make it simple for the application's programmer.
 
 ## Install
@@ -71,7 +71,8 @@ object with the following keys:
     `(webitem) => string`. Look down for an example.
 3. `css`: Optional, String. The CSS to apply on the web component. This CSS will be name-spaced
    within the component, and is not visible outside it.
-4. `propertyList`: Optional, Array of objects. Objects defining properties of the component. Each property
+4. `styleSheets`: Optional, array of `CSSStyleSheet` objects. This way you can share style sheets among components.
+5. `propertyList`: Optional, Array of objects. Objects defining properties of the component. Each property
    definition consists of `{name, value, [sel], [attr]}`.
     1. `name`: Name of the property.
     2. `value`: Initial value of the property.
@@ -79,18 +80,18 @@ object with the following keys:
     4. `attr`: Optional, String. An attribute on the DOM element to bind its value.
     5. `onChange`: Optional. Function. A function to be called when the property's value change through
        an API call. The function can take three arguments `(webitem, oldValue, newValue)`
-5. `eventHandlerList`: Optional, Array of objects. Objects define event handlers of the component.
+6. `eventHandlerList`: Optional, Array of objects. Objects define event handlers of the component.
     Each event handler definition consists of `{sel, eventName, listener}`.
     1. `sel`: A CSS selector of an element in the component.
     2. `eventName`: Name of the event to bind to, e.g. `click`.
     3. `listener`: A function to be called when the event occures. The function accepts two arguments,
        an [event](https://developer.mozilla.org/en-US/docs/Web/API/Event) object, and `webitem` which is the web component.
-6. `actionList`: Optional, Array of objects. Objects define actions that can be defined on the component.
+7. `actionList`: Optional, Array of objects. Objects define actions that can be defined on the component.
     Each action definition consists of `{name, action}`.
     1. `name`: Name of the action.
     2. `action`: a function definition. If you declare this function as a _classic_ (not arrow) function, using
         `this` inside the function will refer to the component.
-7. `display`: Optional, String. A CSS display attribute. A possible value can be
+8. `display`: Optional, String. A CSS display attribute. A possible value can be
    `inline` (default if missing), `inline-block`, or `block`. This controls how the component is displayed
    inside its container.
 
@@ -99,7 +100,7 @@ already exists, in which case it will not be re-created.
 
 The `defineElement()` function defines a standard _Custom Element_/_Web Component_ with all the
 standard properties. It also adds an extra property `wi` that contains extra properties and
-functions supported bby this library as follows:
+functions supported by this library as follows:
 
 1.  `wi.properties`: An object with key/value as defined in the `propertyList` during element
     definition.
@@ -124,8 +125,27 @@ functions supported bby this library as follows:
 CSS applied to a web component (_through shadow DOM_) is scoped to the component, it does not interact
 with CSS outside the component.
 
-If you need to use a common CSS file within the component, a possible solution is to use
-the `<link>` tag in the component's html, for exmaple, add the next line at the top of your component's html:
+If you need to use a common CSS among components, there are two options:
+
+1. Use `CSSStyleSheet` object and pass in the `styleSheets` option. This is the recommended approach.
+For example:
+
+```js
+const sheet = new CSSStyleSheet()
+sheet.replaceSync('h3 { color: red; }')
+
+webitem.defineElement({
+  nameWithDash: 'with-sheets',
+  html: `
+    <div style="background-color:green">
+      <h3>with-sheets Web Item</h3>
+    </div>
+  `,
+  styleSheets: [sheet]
+})
+```
+
+2. Use the `<link>` tag in the component's html, for example, add the next line at the top of your component's html:
 
 ```html
 <link rel="stylesheet" href="css/common.css">
@@ -137,7 +157,7 @@ Next we will show some as well.
 
 ### Provide html as a function
 This example shows how to provide the html content of the component as a function. The function takes
-the comonent itself as an argument and returns a string representing the html of the component.
+the component itself as an argument and returns a string representing the html of the component.
 
 This approach allows you to introspect the definition of the element as given on the page.
 
@@ -210,7 +230,7 @@ console.log($('#bounded').wi.properties.country) // prints USA
 The binding is _bi-directional_, changing the property's value will change the view, and changing the
 value in the view will change the property's value.
 
-Binding properties to DOM elements is optional, you can choose to define a proiperty without `sel` value.
+Binding properties to DOM elements is optional, you can choose to define a property without `sel` value.
 
 For more details about bound properties, check [Data Bind](https://www.npmjs.com/package/@techexp/data-bind)
 NPM package which is used by this library.

package/dist/webitem-esm.js

@@ -1,6 +1,6 @@
 // webitem.js Library to simplify creating HTML5 Custom Elements
 // https://github.com/ahabra/webitem
-// Copyright 2021 (C) Abdul Habra. Version 0.5.3.
+// Copyright 2021 (C) Abdul Habra. Version 0.7.0.
 // Apache License Version 2.0
 
 
@@ -12,18 +12,18 @@ function defineElement({
   nameWithDash,
   html,
   css,
+  styleSheets,
   display,
   propertyList,
   actionList,
   eventHandlerList
 }) {
-  if (customElements.get(nameWithDash))
-    return false;
+  if (customElements.get(nameWithDash)) return false;
   const el = class extends HTMLElement {
     constructor() {
       super();
       const root = this;
-      addHtml(this, html, css, display);
+      addHtml(this, html, css, styleSheets, display);
       this.wi = {};
       this.wi.properties = bindProperties(this, propertyList);
       this.wi.actions = defineActions(this, actionList);
@@ -41,8 +41,7 @@ function defineElement({
 }
 function bindProperties(root, propertyList) {
   const result = {};
-  if (!validatePropertyList(propertyList))
-    return result;
+  if (!validatePropertyList(propertyList)) return result;
   propertyList.forEach((p) => addProperty(result, p, root));
   return result;
 }
@@ -54,13 +53,11 @@ function addProperty(obj, prop, root) {
   }
 }
 function createOnChange(prop, root) {
-  if (!prop.onChange)
-    return void 0;
+  if (!prop.onChange) return void 0;
   return (oldValue, newValue) => prop.onChange(root, oldValue, newValue);
 }
 function validatePropertyList(propertyList) {
-  if (!propertyList)
-    return false;
+  if (!propertyList) return false;
   if (!Array.isArray(propertyList)) {
     throw "propertyList must be an array of {name, value, [sel], [attr]} objects";
   }
@@ -68,21 +65,18 @@ function validatePropertyList(propertyList) {
 }
 function defineActions(root, actionList) {
   const actions = {};
-  if (!actionList)
-    return actions;
+  if (!actionList) return actions;
   actionList.forEach((pair) => {
     addAction(root, actions, pair.name, pair.action);
   });
   return actions;
 }
 function addAction(root, actions, name, action) {
-  if (!Objecter.isString(name) || !Objecter.isFunction(action))
-    return;
+  if (!Objecter.isString(name) || !Objecter.isFunction(action)) return;
   actions[name] = action.bind(root);
 }
 function addEventListeners(root, eventHandlerList) {
-  if (!eventHandlerList)
-    return;
+  if (!eventHandlerList) return;
   if (!Array.isArray(eventHandlerList)) {
     throw "eventHandlerList must be an array of {sel, eventName, listener} objects";
   }
@@ -96,11 +90,14 @@ function addHandler(root, { sel, eventName, listener }) {
     });
   });
 }
-function addHtml(root, html, css, display) {
+function addHtml(root, html, css, styleSheets, display) {
   html = getHtml(root, html);
   const shadow = root.attachShadow({ mode: "open" });
   const nodes = Domer.createElements(getCss(css, display) + html);
   shadow.append(...nodes);
+  if (Array.isArray(styleSheets) && styleSheets.length > 0) {
+    shadow.adoptedStyleSheets.push(...styleSheets);
+  }
 }
 function getHtml(root, html) {
   return Objecter.isFunction(html) ? html(root) : html;
@@ -110,8 +107,7 @@ function getCss(css, display) {
 }
 function buildCss(css) {
   css = Stringer.trim(css);
-  if (css.length === 0)
-    return "";
+  if (css.length === 0) return "";
   if (!Stringer.startsWith(css, "<style>", false)) {
     css = Domer.tag("style", {}, css);
   }
@@ -119,8 +115,7 @@ function buildCss(css) {
 }
 function displayStyle(display) {
   display = Stringer.trim(display);
-  if (display.length === 0)
-    return "";
+  if (display.length === 0) return "";
   return `
   <style>
     :host { display: ${display};}

package/dist/webitem-script-min.js

@@ -1,15 +1,15 @@
 // webitem.js Library to simplify creating HTML5 Custom Elements
 // https://github.com/ahabra/webitem
-// Copyright 2021 (C) Abdul Habra. Version 0.5.3.
+// Copyright 2021 (C) Abdul Habra. Version 0.7.0.
 // Apache License Version 2.0
 
 
-var webitem=(()=>{var v=Object.defineProperty;var ne=Object.getOwnPropertyDescriptor;var re=Object.getOwnPropertyNames;var ie=Object.prototype.hasOwnProperty;var ue=(e,t)=>{for(var n in t)v(e,n,{get:t[n],enumerable:!0})},oe=(e,t,n,r)=>{if(t&&typeof t=="object"||typeof t=="function")for(let i of re(t))!ie.call(e,i)&&i!==n&&v(e,i,{get:()=>t[i],enumerable:!(r=ne(t,i))||r.enumerable});return e};var fe=e=>oe(v({},"__esModule",{value:!0}),e);var ft={};ue(ft,{defineElement:()=>Ue});var se=Object.defineProperty,g=(e,t)=>{for(var n in t)se(e,n,{get:t[n],enumerable:!0})},l={};g(l,{add:()=>Oe,all:()=>F,classPresentIf:()=>Te,createElement:()=>Se,createElements:()=>M,first:()=>be,getAttributes:()=>ve,id:()=>Ee,removeElements:()=>Ne,setContent:()=>Ce,tag:()=>_});var d={};g(d,{equals:()=>q,forEachEntry:()=>L,has:()=>le,isDate:()=>S,isFunction:()=>R,isInteger:()=>ce,isNil:()=>ae,isNumber:()=>P,isRegExp:()=>j,isString:()=>p});function ae(e){return e==null}function p(e){return m(e,"String")}function R(e){return m(e,"Function")}function S(e){return m(e,"Date")}function P(e){return m(e,"Number")?Number.isNaN(e)?!1:Number.isFinite(e):!p(e)||(e=e.trim(),e==="")?!1:!isNaN(e)}function ce(e){return P(e)?Number.isInteger(Number.parseFloat(e)):!1}function j(e){return m(e,"RegExp")}function m(e,t){return Object.prototype.toString.call(e)===`[object ${t}]`}function L(e,t){if(!(!e||!t)){if(Array.isArray(e)){e.forEach((n,r)=>{t(r,n)});return}Object.entries(e).forEach(n=>t(n[0],n[1]))}}function le(e,t){return!e||!t?!1:Object.prototype.hasOwnProperty.call(e,t)}function q(e,t){return e===t?!0:e===void 0||t===void 0?!1:de(e,t)}function de(e,t){return N(e)||N(t)?e===t:he(e,t)}var me=new Set(["boolean","number","bigint","string","symbol"]);function N(e){return me.has(typeof e)}function he(e,t){return ge(e,t)?pe(e,t)?!0:ye(e,t):!1}function ge(e,t){return T(e)===T(t)}function T(e){return Object.prototype.toString.call(e)}function pe(e,t){return S(e)&&S(t)?e.getTime()===t.getTime():!1}function ye(e,t){let n=Object.keys(e);return n.length!==Object.keys(t).length?!1:n.every(r=>q(e[r],t[r]))}function Ee(e,t=document){return O(t)&&(t=t.shadowRoot),t.getElementById(e)}function F(e,t=document){return O(t)&&(t=t.shadowRoot),Array.from(t.querySelectorAll(e))}function be(e,t=document){if(O(t)&&(t=t.shadowRoot),!e.includes("/"))return t.querySelector(e);let n=e.split("/").map(r=>r.trim()).filter(r=>r.length>0);for(let r of n)if(t=we(r,t),t===null)break;return t}function we(e,t){return e==="shadowRoot"||e==="shadow-root"?t.shadowRoot:t.querySelector(e)}function O(e){return e&&e.shadowRoot&&e.tagName.includes("-")}function ve(e){let t={},n=e.attributes;if(!n||n.length===0)return t;for(let r=0;r<n.length;r++){let i=n[r];t[i.name]=i.value}return t}function M(e=""){if(e=e.trim(),!e)return[];let t=document.createElement("template");return t.innerHTML=e,Array.from(t.content.childNodes)}function Se(e,t={},n=""){let r=_(e,t,n),i=M(r);return i.length===0?null:i[0]}function _(e,t={},n=""){if(!e)return"";let r=Ae(t);return`<${e}${r}>${n}</${e}>`}function Ae(e){let t=[];return L(e,(r,i)=>{t.push(`${r}="${i}"`)}),(t.length>0?" ":"")+t.join(" ")}var Le=new Set(["beforebegin","afterbegin","beforeend","afterend"]);function Oe(e,t,n="beforeend"){return n=n.toLowerCase(),Le.has(n)?(p(t)?e.insertAdjacentHTML(n,t):xe(e,t,n),!0):!1}function xe(e,t,n){Array.isArray(t)?t.forEach(r=>e.insertAdjacentElement(n,r)):e.insertAdjacentElement(n,t)}function Ce(e,...t){e.innerHTML="",e.append(...t)}function Ne(e,t=document){F(e,t).forEach(r=>{r.parentNode.removeChild(r)})}function Te(e,t,n){if(!e)return;let r=n?"add":"remove";e.classList[r](t)}var h={};g(h,{endsWith:()=>D,indexOf:()=>x,indexOfFirstMatch:()=>$e,indexOfLastMatch:()=>Re,isEmpty:()=>y,removePrefix:()=>H,removeSuffix:()=>I,removeSurrounding:()=>Pe,replaceAll:()=>V,replaceTemplate:()=>Fe,startsWith:()=>W,strip:()=>We,stripEnd:()=>_e,stripStart:()=>Me,substringAfter:()=>je,substringBefore:()=>qe,trim:()=>A});function x(e,t,n=0,r=!1){return e?r?e.toLowerCase().indexOf(t.toLowerCase(),n):e.indexOf(t,n):-1}function $e(e,t){return!t||!e?-1:e.split("").findIndex(t)}function Re(e,t){if(!t||!e)return-1;let n=e.split("");for(let r=n.length;r>=0;--r)if(t(n[r],r))return r;return-1}function W(e="",t=void 0,n=!1){if(n){let r=e.substring(0,t.length).toLowerCase();return t.toLowerCase()===r}return e.startsWith(t)}function D(e,t,n=!1){return n?e.toLowerCase().endsWith(t.toLowerCase()):e.endsWith(t)}function H(e,t,n=!1){return W(e,t,n)&&(e=e.substring(t.length)),e}function I(e,t,n=!1){return D(e,t,n)&&(e=e.substring(0,e.length-t.length)),e}function Pe(e,t,n,r=!1){return I(H(e,t,r),n,r)}function je(e,t,n=!1){if(!t)return e;let r=x(e,t,0,n);return r<0?"":e.substring(r+t.length)}function qe(e,t,n=!1){if(!t)return"";let r=x(e,t,0,n);return r<0?e:e.substring(0,r)}function A(e){return y(e)?"":(p(e)||(e=String(e)),e.trim(e))}function y(e){return e==null||e===""}function V(e,t,n){if(R(String.prototype.replaceAll))return e.replaceAll(t,n);if(j(t))return e.replace(t,n);let r=new RegExp(t,"g");return e.replace(r,n)}function Fe(e="",t={},n="${",r="}"){return L(t,(i,u)=>{u!==void 0&&(i=n+i+r,e=V(e,i,u))}),e}function Me(e,t=""){return y(e)?"":t?k(e,new Set(Array.from(t))):e}function k(e,t){for(let n=0;n<e.length;n++)if(!t.has(e.charAt(n)))return e.substring(n);return""}function _e(e,t=""){return y(e)?"":t?B(e,new Set(Array.from(t))):e}function B(e,t){for(let n=e.length-1;n>=0;n--)if(!t.has(e.charAt(n)))return e.substring(0,n+1);return""}function We(e,t=""){if(e===void 0||e==="")return"";if(!t)return e;let n=new Set(Array.from(t));return e=k(e,n),e?B(e,n):""}var De={};g(De,{compareLines:()=>He});function He(e,t,{trim:n=!0,skipEmpty:r=!0,caseSensitive:i=!0}={trim:!0,skipEmpty:!0,caseSensitive:!0}){if(e=$(e,{trim:n,skipEmpty:r}),t=$(t,{trim:n,skipEmpty:r}),e.length!==t.length)return`t1 has ${e.length} lines(s) while t2 has ${t.length} line(s).`;for(let u=0;u<e.length;u++){let o=Ie(e[u],t[u],u,i);if(o.length>0)return o}return""}function Ie(e,t,n,r){let i=r?e:e.toLowerCase(),u=r?t:t.toLowerCase();return i!==u?`Line #${n+1} mismatch.
+var webitem=(()=>{var S=Object.defineProperty;var re=Object.getOwnPropertyDescriptor;var ie=Object.getOwnPropertyNames;var ue=Object.prototype.hasOwnProperty;var oe=(e,t)=>{for(var n in t)S(e,n,{get:t[n],enumerable:!0})},fe=(e,t,n,r)=>{if(t&&typeof t=="object"||typeof t=="function")for(let i of ie(t))!ue.call(e,i)&&i!==n&&S(e,i,{get:()=>t[i],enumerable:!(r=re(t,i))||r.enumerable});return e};var se=e=>fe(S({},"__esModule",{value:!0}),e);var ct={};oe(ct,{defineElement:()=>Ze});var ae=Object.defineProperty,p=(e,t)=>{for(var n in t)ae(e,n,{get:t[n],enumerable:!0})},l={};p(l,{add:()=>Ce,all:()=>M,classPresentIf:()=>Pe,createElement:()=>Le,createElements:()=>_,first:()=>we,getAttributes:()=>Ae,id:()=>be,removeElements:()=>$e,setContent:()=>Te,tag:()=>W});var d={};p(d,{equals:()=>F,forEachEntry:()=>O,has:()=>de,isDate:()=>A,isFunction:()=>R,isInteger:()=>le,isNil:()=>ce,isNumber:()=>j,isRegExp:()=>q,isString:()=>y});function ce(e){return e==null}function y(e){return m(e,"String")}function R(e){return m(e,"Function")}function A(e){return m(e,"Date")}function j(e){return m(e,"Number")?Number.isNaN(e)?!1:Number.isFinite(e):!y(e)||(e=e.trim(),e==="")?!1:!isNaN(e)}function le(e){return j(e)?Number.isInteger(Number.parseFloat(e)):!1}function q(e){return m(e,"RegExp")}function m(e,t){return Object.prototype.toString.call(e)===`[object ${t}]`}function O(e,t){if(!(!e||!t)){if(Array.isArray(e)){e.forEach((n,r)=>{t(r,n)});return}Object.entries(e).forEach(n=>t(n[0],n[1]))}}function de(e,t){return!e||!t?!1:Object.prototype.hasOwnProperty.call(e,t)}function F(e,t){return e===t?!0:e===void 0||t===void 0?!1:me(e,t)}function me(e,t){return T(e)||T(t)?e===t:ge(e,t)}var he=new Set(["boolean","number","bigint","string","symbol"]);function T(e){return he.has(typeof e)}function ge(e,t){return pe(e,t)?ye(e,t)?!0:Ee(e,t):!1}function pe(e,t){return $(e)===$(t)}function $(e){return Object.prototype.toString.call(e)}function ye(e,t){return A(e)&&A(t)?e.getTime()===t.getTime():!1}function Ee(e,t){let n=Object.keys(e);return n.length!==Object.keys(t).length?!1:n.every(r=>F(e[r],t[r]))}function be(e,t=document){return x(t)&&(t=t.shadowRoot),t.getElementById(e)}function M(e,t=document){return x(t)&&(t=t.shadowRoot),Array.from(t.querySelectorAll(e))}function we(e,t=document){return x(t)&&(t=t.shadowRoot),e.includes("/")?ve(e,t):t.querySelector(e)}function ve(e,t){let n=e.split("/").map(r=>r.trim()).filter(r=>r.length>0);for(let r of n)if(t=Se(r,t),t===null)break;return t}function Se(e,t){return e==="shadowRoot"||e==="shadow-root"?t.shadowRoot:t.querySelector(e)}function x(e){return e&&e.shadowRoot&&e.tagName.includes("-")}function Ae(e){let t={},n=e.attributes;if(!n||n.length===0)return t;for(let r=0;r<n.length;r++){let i=n[r];t[i.name]=i.value}return t}function _(e=""){if(e=e.trim(),!e)return[];let t=document.createElement("template");return t.innerHTML=e,Array.from(t.content.childNodes)}function Le(e,t={},n=""){let r=W(e,t,n),i=_(r);return i.length===0?null:i[0]}function W(e,t={},n=""){if(!e)return"";let r=Oe(t);return`<${e}${r}>${n}</${e}>`}function Oe(e){let t=[];return O(e,(r,i)=>{t.push(`${r}="${i}"`)}),(t.length>0?" ":"")+t.join(" ")}var xe=new Set(["beforebegin","afterbegin","beforeend","afterend"]);function Ce(e,t,n="beforeend"){return n=n.toLowerCase(),xe.has(n)?(y(t)?e.insertAdjacentHTML(n,t):Ne(e,t,n),!0):!1}function Ne(e,t,n){Array.isArray(t)?t.forEach(r=>e.insertAdjacentElement(n,r)):e.insertAdjacentElement(n,t)}function Te(e,...t){e.innerHTML="",e.append(...t)}function $e(e,t=document){M(e,t).forEach(r=>{r.parentNode.removeChild(r)})}function Pe(e,t,n){if(!e)return;let r=n?"add":"remove";e.classList[r](t)}var h={};p(h,{endsWith:()=>H,indexOf:()=>C,indexOfFirstMatch:()=>Re,indexOfLastMatch:()=>je,isEmpty:()=>E,removePrefix:()=>I,removeSuffix:()=>V,removeSurrounding:()=>qe,replaceAll:()=>k,replaceTemplate:()=>_e,startsWith:()=>D,strip:()=>He,stripEnd:()=>De,stripStart:()=>We,substringAfter:()=>Fe,substringBefore:()=>Me,trim:()=>L});function C(e,t,n=0,r=!1){return e?r?e.toLowerCase().indexOf(t.toLowerCase(),n):e.indexOf(t,n):-1}function Re(e,t){return!t||!e?-1:e.split("").findIndex(t)}function je(e,t){if(!t||!e)return-1;let n=e.split("");for(let r=n.length;r>=0;--r)if(t(n[r],r))return r;return-1}function D(e="",t=void 0,n=!1){if(n){let r=e.substring(0,t.length).toLowerCase();return t.toLowerCase()===r}return e.startsWith(t)}function H(e,t,n=!1){return n?e.toLowerCase().endsWith(t.toLowerCase()):e.endsWith(t)}function I(e,t,n=!1){return D(e,t,n)&&(e=e.substring(t.length)),e}function V(e,t,n=!1){return H(e,t,n)&&(e=e.substring(0,e.length-t.length)),e}function qe(e,t,n,r=!1){return V(I(e,t,r),n,r)}function Fe(e,t,n=!1){if(!t)return e;let r=C(e,t,0,n);return r<0?"":e.substring(r+t.length)}function Me(e,t,n=!1){if(!t)return"";let r=C(e,t,0,n);return r<0?e:e.substring(0,r)}function L(e){return E(e)?"":(y(e)||(e=String(e)),e.trim(e))}function E(e){return e==null||e===""}function k(e,t,n){if(R(String.prototype.replaceAll))return e.replaceAll(t,n);if(q(t))return e.replace(t,n);let r=new RegExp(t,"g");return e.replace(r,n)}function _e(e="",t={},n="${",r="}"){return O(t,(i,u)=>{u!==void 0&&(i=n+i+r,e=k(e,i,u))}),e}function We(e,t=""){return E(e)?"":t?B(e,new Set(Array.from(t))):e}function B(e,t){for(let n=0;n<e.length;n++)if(!t.has(e.charAt(n)))return e.substring(n);return""}function De(e,t=""){return E(e)?"":t?z(e,new Set(Array.from(t))):e}function z(e,t){for(let n=e.length-1;n>=0;n--)if(!t.has(e.charAt(n)))return e.substring(0,n+1);return""}function He(e,t=""){if(e===void 0||e==="")return"";if(!t)return e;let n=new Set(Array.from(t));return e=B(e,n),e?z(e,n):""}var Ie={};p(Ie,{compareLines:()=>Ve});function Ve(e,t,{trim:n=!0,skipEmpty:r=!0,caseSensitive:i=!0}={trim:!0,skipEmpty:!0,caseSensitive:!0}){return e=P(e,{trim:n,skipEmpty:r}),t=P(t,{trim:n,skipEmpty:r}),e.length!==t.length?`t1 has ${e.length} lines(s) while t2 has ${t.length} line(s).`:ke(e,t,i)}function ke(e,t,n){for(let r=0;r<e.length;r++){let i=Be(e[r],t[r],r,n);if(i.length>0)return i}return""}function Be(e,t,n,r){let i=r?e:e.toLowerCase(),u=r?t:t.toLowerCase();return i!==u?`Line #${n+1} mismatch.
 ${e}
-${t}`:""}function $(e,{trim:t,skipEmpty:n}){return t&&(e=A(e)),e=e.split(`
-`),t&&(e=e.map(r=>A(r))),n&&(e=e.filter(r=>!!r)),e}function C({obj:e={},prop:t,sel:n,attr:r,root:i=document,getter:u,setter:o,onChange:f}){Qe(t),ke(e,t);let s={};return u||(u=()=>Be({prop:t,sel:n,attr:r,root:i,objNotBound:s})),o||(o=a=>ze({prop:t,value:a,root:i,sel:n,attr:r,objNotBound:s})),Ve({obj:e,prop:t,getter:u,setter:o,onChange:f})}function Ve({obj:e,prop:t,getter:n,setter:r,onChange:i}){return Object.defineProperty(e,t,{get:()=>n(),set:o=>{if(i){let f=n(t);f!==o&&i(f,o)}r(o)},configurable:!0,enumerable:!0}),e}var E=e=>e.type==="checkbox",b=e=>e.type==="radio",G=e=>e.nodeName.toLowerCase()==="select",J=e=>e.nodeName.toLowerCase()==="input-field",K=e=>"value"in e,z=e=>new Set(Array.isArray(e)?e:[e]);function ke(e,t){let n=e[t];return n!==void 0&&(console.info(`Property '${t}' already exists in object. Will override previous definition but retain old value of ${n}.`),e[t]=n),n}function Be({prop:e,root:t,sel:n,attr:r,objNotBound:i}){return n?Ge(t,n,r):i[e]}function ze({prop:e,value:t,root:n,sel:r,attr:i,objNotBound:u}){if(r){Je(n,r,t,i);return}u[e]=t}function Ge(e,t,n){let r=Q(e,t);if(r.length===0)return null;let i=r[0];if(n)return i.getAttribute(n);if(!K(i))return i.innerHTML;if(E(i))return r.filter(u=>E(u)&&u.checked).map(u=>u.value==="on"?u.name:u.value);if(G(i))return[...i.querySelectorAll("option")].filter(o=>o.selected).map(o=>o.value);if(!(b(i)&&(i=r.filter(b).find(u=>u.checked),!i)))return J(i)?i.getAttribute("value"):i.value}function Je(e,t,n,r){let i=Q(e,t);if(i.length===0)return;let u=i[0];if(E(u)){let o=z(n);i.filter(E).forEach(f=>f.checked=o.has(f.value)||o.has(f.name));return}if(G(u)){let o=z(n);u.querySelectorAll("option").forEach(f=>f.selected=o.has(f.value));return}if(b(u)){i.filter(b).forEach(o=>o.checked=o.value===n);return}i.forEach(o=>Ke(o,n,r))}function Ke(e,t,n){n?e.setAttribute(n,t):K(e)?e.value=t:J(e)?e.setAttribute("value",t):e.innerHTML=t}function Q(e,t){let n=e.querySelectorAll(t);return n.length===0&&console.warn(`No elements found matching selector ${t}`),[...n]}function Qe(e){if(typeof e!="string"||e.length===0)throw"'prop' argument must be a String defining the name a property."}function Ue({nameWithDash:e,html:t,css:n,display:r,propertyList:i,actionList:u,eventHandlerList:o}){if(customElements.get(e))return!1;let f=class extends HTMLElement{constructor(){super();let s=this;nt(this,t,n,r),this.wi={},this.wi.properties=Xe(this,i),this.wi.actions=et(this,u),tt(this,o),this.wi.addProperty=function(a,c,w,Z,ee){let te={name:a,value:c,sel:w,attr:Z,onChange:ee};U(s.wi.properties,te,s)},this.wi.addAction=(a,c)=>X(s,s.wi.actions,a,c),this.wi.addEventListener=(a,c,w)=>Y(s,{sel:a,eventName:c,listener:w})}};return customElements.define(e,f),!0}function Xe(e,t){let n={};return Ze(t)&&t.forEach(r=>U(n,r,e)),n}function U(e,t,n){let r=Ye(t,n);C({obj:e,prop:t.name,sel:t.sel,attr:t.attr,root:n.shadowRoot,onChange:r}),t.value!==void 0&&(e[t.name]=t.value)}function Ye(e,t){if(e.onChange)return(n,r)=>e.onChange(t,n,r)}function Ze(e){if(!e)return!1;if(!Array.isArray(e))throw"propertyList must be an array of {name, value, [sel], [attr]} objects";return!0}function et(e,t){let n={};return t&&t.forEach(r=>{X(e,n,r.name,r.action)}),n}function X(e,t,n,r){!d.isString(n)||!d.isFunction(r)||(t[n]=r.bind(e))}function tt(e,t){if(t){if(!Array.isArray(t))throw"eventHandlerList must be an array of {sel, eventName, listener} objects";t.forEach(n=>Y(e,n))}}function Y(e,{sel:t,eventName:n,listener:r}){l.all(t,e.shadowRoot).forEach(u=>{u.addEventListener(n,o=>{r(o,e)})})}function nt(e,t,n,r){t=rt(e,t);let i=e.attachShadow({mode:"open"}),u=l.createElements(it(n,r)+t);i.append(...u)}function rt(e,t){return d.isFunction(t)?t(e):t}function it(e,t){return ot(t)+ut(e)}function ut(e){return e=h.trim(e),e.length===0?"":(h.startsWith(e,"<style>",!1)||(e=l.tag("style",{},e)),e)}function ot(e){return e=h.trim(e),e.length===0?"":`
+${t}`:""}function P(e,{trim:t,skipEmpty:n}){return t&&(e=L(e)),e=e.split(`
+`),t&&(e=e.map(r=>L(r))),n&&(e=e.filter(r=>!!r)),e}function N({obj:e={},prop:t,sel:n,attr:r,root:i=document,getter:u,setter:o,onChange:f}){Ye(t),Ge(e,t);let g={};return u||(u=()=>Je({prop:t,sel:n,attr:r,root:i,objNotBound:g})),o||(o=s=>Ke({prop:t,value:s,root:i,sel:n,attr:r,objNotBound:g})),ze({obj:e,prop:t,getter:u,setter:o,onChange:f})}function ze({obj:e,prop:t,getter:n,setter:r,onChange:i}){return Object.defineProperty(e,t,{get:()=>n(),set:o=>{if(i){let f=n(t);f!==o&&i(f,o)}r(o)},configurable:!0,enumerable:!0}),e}var b=e=>e.type==="checkbox",w=e=>e.type==="radio",J=e=>e.nodeName.toLowerCase()==="select",K=e=>e.nodeName.toLowerCase()==="input-field",Q=e=>"value"in e,G=e=>new Set(Array.isArray(e)?e:[e]);function Ge(e,t){let n=e[t];return n!==void 0&&(console.info(`Property '${t}' already exists in object. Will override previous definition but retain old value of ${n}.`),e[t]=n),n}function Je({prop:e,root:t,sel:n,attr:r,objNotBound:i}){return n?Qe(t,n,r):i[e]}function Ke({prop:e,value:t,root:n,sel:r,attr:i,objNotBound:u}){if(r){Ue(n,r,t,i);return}u[e]=t}function Qe(e,t,n){let r=U(e,t);if(r.length===0)return null;let i=r[0];if(n)return i.getAttribute(n);if(!Q(i))return i.innerHTML;if(b(i))return r.filter(u=>b(u)&&u.checked).map(u=>u.value==="on"?u.name:u.value);if(J(i))return[...i.querySelectorAll("option")].filter(o=>o.selected).map(o=>o.value);if(!(w(i)&&(i=r.filter(w).find(u=>u.checked),!i)))return K(i)?i.getAttribute("value"):i.value}function Ue(e,t,n,r){let i=U(e,t);if(i.length===0)return;let u=i[0];if(b(u)){let o=G(n);i.filter(b).forEach(f=>f.checked=o.has(f.value)||o.has(f.name));return}if(J(u)){let o=G(n);u.querySelectorAll("option").forEach(f=>f.selected=o.has(f.value));return}if(w(u)){i.filter(w).forEach(o=>o.checked=o.value===n);return}i.forEach(o=>Xe(o,n,r))}function Xe(e,t,n){n?e.setAttribute(n,t):Q(e)?e.value=t:K(e)?e.setAttribute("value",t):e.innerHTML=t}function U(e,t){let n=e.querySelectorAll(t);return n.length===0&&console.warn(`No elements found matching selector ${t}`),[...n]}function Ye(e){if(typeof e!="string"||e.length===0)throw"'prop' argument must be a String defining the name a property."}function Ze({nameWithDash:e,html:t,css:n,styleSheets:r,display:i,propertyList:u,actionList:o,eventHandlerList:f}){if(customElements.get(e))return!1;let g=class extends HTMLElement{constructor(){super();let s=this;ut(this,t,n,r,i),this.wi={},this.wi.properties=et(this,u),this.wi.actions=rt(this,o),it(this,f),this.wi.addProperty=function(a,c,v,ee,te){let ne={name:a,value:c,sel:v,attr:ee,onChange:te};X(s.wi.properties,ne,s)},this.wi.addAction=(a,c)=>Y(s,s.wi.actions,a,c),this.wi.addEventListener=(a,c,v)=>Z(s,{sel:a,eventName:c,listener:v})}};return customElements.define(e,g),!0}function et(e,t){let n={};return nt(t)&&t.forEach(r=>X(n,r,e)),n}function X(e,t,n){let r=tt(t,n);N({obj:e,prop:t.name,sel:t.sel,attr:t.attr,root:n.shadowRoot,onChange:r}),t.value!==void 0&&(e[t.name]=t.value)}function tt(e,t){if(e.onChange)return(n,r)=>e.onChange(t,n,r)}function nt(e){if(!e)return!1;if(!Array.isArray(e))throw"propertyList must be an array of {name, value, [sel], [attr]} objects";return!0}function rt(e,t){let n={};return t&&t.forEach(r=>{Y(e,n,r.name,r.action)}),n}function Y(e,t,n,r){!d.isString(n)||!d.isFunction(r)||(t[n]=r.bind(e))}function it(e,t){if(t){if(!Array.isArray(t))throw"eventHandlerList must be an array of {sel, eventName, listener} objects";t.forEach(n=>Z(e,n))}}function Z(e,{sel:t,eventName:n,listener:r}){l.all(t,e.shadowRoot).forEach(u=>{u.addEventListener(n,o=>{r(o,e)})})}function ut(e,t,n,r,i){t=ot(e,t);let u=e.attachShadow({mode:"open"}),o=l.createElements(ft(n,i)+t);u.append(...o),Array.isArray(r)&&r.length>0&&u.adoptedStyleSheets.push(...r)}function ot(e,t){return d.isFunction(t)?t(e):t}function ft(e,t){return at(t)+st(e)}function st(e){return e=h.trim(e),e.length===0?"":(h.startsWith(e,"<style>",!1)||(e=l.tag("style",{},e)),e)}function at(e){return e=h.trim(e),e.length===0?"":`
   <style>
     :host { display: ${e};}
     :host([hidden]) {display: none;}
   </style>
-  `}return fe(ft);})();
+  `}return se(ct);})();

package/dist/webitem-script.js

@@ -1,6 +1,6 @@
 // webitem.js Library to simplify creating HTML5 Custom Elements
 // https://github.com/ahabra/webitem
-// Copyright 2021 (C) Abdul Habra. Version 0.5.3.
+// Copyright 2021 (C) Abdul Habra. Version 0.7.0.
 // Apache License Version 2.0
 
 
@@ -76,20 +76,16 @@ var webitem = (() => {
   }
   function isNumber(n) {
     if (isType(n, "Number")) {
-      if (Number.isNaN(n))
-        return false;
+      if (Number.isNaN(n)) return false;
       return Number.isFinite(n);
     }
-    if (!isString(n))
-      return false;
+    if (!isString(n)) return false;
     n = n.trim();
-    if (n === "")
-      return false;
+    if (n === "") return false;
     return !isNaN(n);
   }
   function isInteger(n) {
-    if (!isNumber(n))
-      return false;
+    if (!isNumber(n)) return false;
     return Number.isInteger(Number.parseFloat(n));
   }
   function isRegExp(re) {
@@ -99,8 +95,7 @@ var webitem = (() => {
     return Object.prototype.toString.call(v) === `[object ${type}]`;
   }
   function forEachEntry(object, func) {
-    if (!object || !func)
-      return;
+    if (!object || !func) return;
     if (Array.isArray(object)) {
       object.forEach((v, index) => {
         func(index, v);
@@ -110,20 +105,16 @@ var webitem = (() => {
     Object.entries(object).forEach((p) => func(p[0], p[1]));
   }
   function has(object, propName) {
-    if (!object || !propName)
-      return false;
+    if (!object || !propName) return false;
     return Object.prototype.hasOwnProperty.call(object, propName);
   }
   function equals(a, b) {
-    if (a === b)
-      return true;
-    if (a === void 0 || b === void 0)
-      return false;
+    if (a === b) return true;
+    if (a === void 0 || b === void 0) return false;
     return isEqual(a, b);
   }
   function isEqual(a, b) {
-    if (isSimpleType(a) || isSimpleType(b))
-      return a === b;
+    if (isSimpleType(a) || isSimpleType(b)) return a === b;
     return isEqualCompoundType(a, b);
   }
   var simpleTypes = /* @__PURE__ */ new Set(["boolean", "number", "bigint", "string", "symbol"]);
@@ -131,10 +122,8 @@ var webitem = (() => {
     return simpleTypes.has(typeof v);
   }
   function isEqualCompoundType(a, b) {
-    if (!isEqualType(a, b))
-      return false;
-    if (isEqualDates(a, b))
-      return true;
+    if (!isEqualType(a, b)) return false;
+    if (isEqualDates(a, b)) return true;
     return isEqualObjects(a, b);
   }
   function isEqualType(a, b) {
@@ -151,8 +140,7 @@ var webitem = (() => {
   }
   function isEqualObjects(a, b) {
     const akeys = Object.keys(a);
-    if (akeys.length !== Object.keys(b).length)
-      return false;
+    if (akeys.length !== Object.keys(b).length) return false;
     return akeys.every((k) => equals(a[k], b[k]));
   }
   function id(elementId, root = document) {
@@ -174,11 +162,13 @@ var webitem = (() => {
     if (!selector.includes("/")) {
       return root.querySelector(selector);
     }
+    return traverseSelectorPath(selector, root);
+  }
+  function traverseSelectorPath(selector, root) {
     const path = selector.split("/").map((p) => p.trim()).filter((p) => p.length > 0);
     for (const p of path) {
       root = nextChild(p, root);
-      if (root === null)
-        break;
+      if (root === null) break;
     }
     return root;
   }
@@ -192,8 +182,7 @@ var webitem = (() => {
   function getAttributes(el) {
     const result = {};
     const atts = el.attributes;
-    if (!atts || atts.length === 0)
-      return result;
+    if (!atts || atts.length === 0) return result;
     for (let i = 0; i < atts.length; i++) {
       const a = atts[i];
       result[a.name] = a.value;
@@ -202,8 +191,7 @@ var webitem = (() => {
   }
   function createElements(html = "") {
     html = html.trim();
-    if (!html)
-      return [];
+    if (!html) return [];
     const temp = document.createElement("template");
     temp.innerHTML = html;
     return Array.from(temp.content.childNodes);
@@ -211,13 +199,11 @@ var webitem = (() => {
   function createElement(name, attributes = {}, content = "") {
     const html = tag(name, attributes, content);
     const elements = createElements(html);
-    if (elements.length === 0)
-      return null;
+    if (elements.length === 0) return null;
     return elements[0];
   }
   function tag(name, attributes = {}, content = "") {
-    if (!name)
-      return "";
+    if (!name) return "";
     const atts = attsToString(attributes);
     return `<${name}${atts}>${content}</${name}>`;
   }
@@ -232,8 +218,7 @@ var webitem = (() => {
   var LOCATIONS = /* @__PURE__ */ new Set(["beforebegin", "afterbegin", "beforeend", "afterend"]);
   function add(target, tobeAdded, location = "beforeend") {
     location = location.toLowerCase();
-    if (!LOCATIONS.has(location))
-      return false;
+    if (!LOCATIONS.has(location)) return false;
     if (isString(tobeAdded)) {
       target.insertAdjacentHTML(location, tobeAdded);
     } else {
@@ -259,8 +244,7 @@ var webitem = (() => {
     });
   }
   function classPresentIf(el, cssClass, condition) {
-    if (!el)
-      return;
+    if (!el) return;
     const func = condition ? "add" : "remove";
     el.classList[func](cssClass);
   }
@@ -285,25 +269,21 @@ var webitem = (() => {
     trim: () => trim
   });
   function indexOf(st, search, fromIndex = 0, ignoreCase = false) {
-    if (!st)
-      return -1;
+    if (!st) return -1;
     if (ignoreCase) {
       return st.toLowerCase().indexOf(search.toLowerCase(), fromIndex);
     }
     return st.indexOf(search, fromIndex);
   }
   function indexOfFirstMatch(st, callback) {
-    if (!callback || !st)
-      return -1;
+    if (!callback || !st) return -1;
     return st.split("").findIndex(callback);
   }
   function indexOfLastMatch(st, callback) {
-    if (!callback || !st)
-      return -1;
+    if (!callback || !st) return -1;
     const chars = st.split("");
     for (let i = chars.length; i >= 0; --i) {
-      if (callback(chars[i], i))
-        return i;
+      if (callback(chars[i], i)) return i;
     }
     return -1;
   }
@@ -340,8 +320,7 @@ var webitem = (() => {
       return st;
     }
     const i = indexOf(st, search, 0, ignoreCase);
-    if (i < 0)
-      return "";
+    if (i < 0) return "";
     return st.substring(i + search.length);
   }
   function substringBefore(st, search, ignoreCase = false) {
@@ -349,13 +328,11 @@ var webitem = (() => {
       return "";
     }
     const i = indexOf(st, search, 0, ignoreCase);
-    if (i < 0)
-      return st;
+    if (i < 0) return st;
     return st.substring(0, i);
   }
   function trim(s) {
-    if (isEmpty(s))
-      return "";
+    if (isEmpty(s)) return "";
     if (!isString(s)) {
       s = String(s);
     }
@@ -384,10 +361,8 @@ var webitem = (() => {
     return text;
   }
   function stripStart(s, stripChars = "") {
-    if (isEmpty(s))
-      return "";
-    if (!stripChars)
-      return s;
+    if (isEmpty(s)) return "";
+    if (!stripChars) return s;
     return stripStart_(s, new Set(Array.from(stripChars)));
   }
   function stripStart_(s, stripSet) {
@@ -399,10 +374,8 @@ var webitem = (() => {
     return "";
   }
   function stripEnd(s, stripChars = "") {
-    if (isEmpty(s))
-      return "";
-    if (!stripChars)
-      return s;
+    if (isEmpty(s)) return "";
+    if (!stripChars) return s;
     return stripEnd_(s, new Set(Array.from(stripChars)));
   }
   function stripEnd_(s, stripSet) {
@@ -414,14 +387,11 @@ var webitem = (() => {
     return "";
   }
   function strip(s, stripChars = "") {
-    if (s === void 0 || s === "")
-      return "";
-    if (!stripChars)
-      return s;
+    if (s === void 0 || s === "") return "";
+    if (!stripChars) return s;
     const stripSet = new Set(Array.from(stripChars));
     s = stripStart_(s, stripSet);
-    if (!s)
-      return "";
+    if (!s) return "";
     return stripEnd_(s, stripSet);
   }
   var LineCompare_exports = {};
@@ -434,6 +404,9 @@ var webitem = (() => {
     if (t1.length !== t2.length) {
       return `t1 has ${t1.length} lines(s) while t2 has ${t2.length} line(s).`;
     }
+    return compareArraysOfLines(t1, t2, caseSensitive);
+  }
+  function compareArraysOfLines(t1, t2, caseSensitive) {
     for (let i = 0; i < t1.length; i++) {
       const result = compareTwoLines(t1[i], t2[i], i, caseSensitive);
       if (result.length > 0) {
@@ -521,8 +494,7 @@ ${t2}`;
     return oldValue;
   }
   function getValue({ prop, root, sel, attr, objNotBound }) {
-    if (sel)
-      return getDomVal(root, sel, attr);
+    if (sel) return getDomVal(root, sel, attr);
     return objNotBound[prop];
   }
   function setValue({ prop, value, root, sel, attr, objNotBound }) {
@@ -534,13 +506,10 @@ ${t2}`;
   }
   function getDomVal(root, sel, attr) {
     const elements = findElements(root, sel);
-    if (elements.length === 0)
-      return null;
+    if (elements.length === 0) return null;
     let el = elements[0];
-    if (attr)
-      return el.getAttribute(attr);
-    if (!isInput(el))
-      return el.innerHTML;
+    if (attr) return el.getAttribute(attr);
+    if (!isInput(el)) return el.innerHTML;
     if (isCheckbox(el)) {
       return elements.filter((e) => isCheckbox(e) && e.checked).map((e) => e.value === "on" ? e.name : e.value);
     }
@@ -550,8 +519,7 @@ ${t2}`;
     }
     if (isRadio(el)) {
       el = elements.filter(isRadio).find((e) => e.checked);
-      if (!el)
-        return void 0;
+      if (!el) return void 0;
     }
     if (isInputField(el)) {
       return el.getAttribute("value");
@@ -560,8 +528,7 @@ ${t2}`;
   }
   function setDomVal(root, sel, val, attr) {
     const elements = findElements(root, sel);
-    if (elements.length === 0)
-      return;
+    if (elements.length === 0) return;
     const el = elements[0];
     if (isCheckbox(el)) {
       const v = toSet(val);
@@ -608,18 +575,18 @@ ${t2}`;
     nameWithDash,
     html,
     css,
+    styleSheets,
     display,
     propertyList,
     actionList,
     eventHandlerList
   }) {
-    if (customElements.get(nameWithDash))
-      return false;
+    if (customElements.get(nameWithDash)) return false;
     const el = class extends HTMLElement {
       constructor() {
         super();
         const root = this;
-        addHtml(this, html, css, display);
+        addHtml(this, html, css, styleSheets, display);
         this.wi = {};
         this.wi.properties = bindProperties(this, propertyList);
         this.wi.actions = defineActions(this, actionList);
@@ -637,8 +604,7 @@ ${t2}`;
   }
   function bindProperties(root, propertyList) {
     const result = {};
-    if (!validatePropertyList(propertyList))
-      return result;
+    if (!validatePropertyList(propertyList)) return result;
     propertyList.forEach((p) => addProperty(result, p, root));
     return result;
   }
@@ -650,13 +616,11 @@ ${t2}`;
     }
   }
   function createOnChange(prop, root) {
-    if (!prop.onChange)
-      return void 0;
+    if (!prop.onChange) return void 0;
     return (oldValue, newValue) => prop.onChange(root, oldValue, newValue);
   }
   function validatePropertyList(propertyList) {
-    if (!propertyList)
-      return false;
+    if (!propertyList) return false;
     if (!Array.isArray(propertyList)) {
       throw "propertyList must be an array of {name, value, [sel], [attr]} objects";
     }
@@ -664,21 +628,18 @@ ${t2}`;
   }
   function defineActions(root, actionList) {
     const actions = {};
-    if (!actionList)
-      return actions;
+    if (!actionList) return actions;
     actionList.forEach((pair) => {
       addAction(root, actions, pair.name, pair.action);
     });
     return actions;
   }
   function addAction(root, actions, name, action) {
-    if (!Objecter_exports.isString(name) || !Objecter_exports.isFunction(action))
-      return;
+    if (!Objecter_exports.isString(name) || !Objecter_exports.isFunction(action)) return;
     actions[name] = action.bind(root);
   }
   function addEventListeners(root, eventHandlerList) {
-    if (!eventHandlerList)
-      return;
+    if (!eventHandlerList) return;
     if (!Array.isArray(eventHandlerList)) {
       throw "eventHandlerList must be an array of {sel, eventName, listener} objects";
     }
@@ -692,11 +653,14 @@ ${t2}`;
       });
     });
   }
-  function addHtml(root, html, css, display) {
+  function addHtml(root, html, css, styleSheets, display) {
     html = getHtml(root, html);
     const shadow = root.attachShadow({ mode: "open" });
     const nodes = Domer_exports.createElements(getCss(css, display) + html);
     shadow.append(...nodes);
+    if (Array.isArray(styleSheets) && styleSheets.length > 0) {
+      shadow.adoptedStyleSheets.push(...styleSheets);
+    }
   }
   function getHtml(root, html) {
     return Objecter_exports.isFunction(html) ? html(root) : html;
@@ -706,8 +670,7 @@ ${t2}`;
   }
   function buildCss(css) {
     css = Stringer_exports.trim(css);
-    if (css.length === 0)
-      return "";
+    if (css.length === 0) return "";
     if (!Stringer_exports.startsWith(css, "<style>", false)) {
       css = Domer_exports.tag("style", {}, css);
     }
@@ -715,8 +678,7 @@ ${t2}`;
   }
   function displayStyle(display) {
     display = Stringer_exports.trim(display);
-    if (display.length === 0)
-      return "";
+    if (display.length === 0) return "";
     return `
   <style>
     :host { display: ${display};}

package/eslint.config.js

@@ -0,0 +1,95 @@
+import js from '@eslint/js'
+import globals from "globals"
+import { defineConfig } from 'eslint/config'
+
+const error = 'error'
+const readonly = 'readonly'
+const always = 'always'
+const never = 'never'
+
+export default defineConfig([
+  {
+    files: ['**/*.js'],
+    plugins: {  js  },
+    extends: ['js/recommended'],
+
+    languageOptions: {
+      ecmaVersion: 'latest',
+      sourceType: 'module',
+
+      globals: {
+        ...globals.browser,
+        describe: readonly,
+        it: readonly,
+        beforeEach: readonly,
+        afterEach: readonly
+      }
+    },
+
+    rules: {
+      indent: [error, 2],
+      'linebreak-style': [error, 'unix'],
+      quotes: [error, 'single'],
+      semi: [error, never],
+
+      'block-scoped-var': [error],
+      complexity: [error, 6],
+      'dot-location': [error, 'object'],
+      eqeqeq: [error, always],
+      'no-else-return': [error],
+      'no-multi-spaces': [error, { ignoreEOLComments: true }],
+      'no-octal': [error],
+      'no-octal-escape': [error],
+      'no-return-assign': [error, always],
+      'no-sequences': [error],
+      'no-useless-concat': [error],
+      'no-useless-return': [error],
+      radix: [error],
+      yoda: [error],
+
+      'no-label-var': [error],
+      'brace-style': [error, '1tbs', {allowSingleLine: true}],
+      'comma-spacing': [error, {before: false, after: true}],
+      'comma-style': [error, 'last'],
+      'func-call-spacing': [error, never],
+      'key-spacing': [error, {beforeColon: false, afterColon:true}],
+      'keyword-spacing': [error],
+      'max-depth': [error, 4],
+      'max-len': [error, {code: 120, comments: 100, ignoreUrls: true}],
+      'max-lines': [error, {max: 300, skipBlankLines: true, skipComments: false}],
+      'max-lines-per-function': [error, {max: 200, skipBlankLines: true, skipComments: true, IIFEs: false}],
+      'max-nested-callbacks': [error, 4],
+      'max-params': [error, 5],
+      'max-statements': [error, 10],
+      'max-statements-per-line': [error, {max: 2}],
+      'new-cap': [error],
+      'new-parens': [error, always],
+      'no-array-constructor': [error],
+      'no-bitwise': [error],
+      'no-lonely-if': [error],
+      'no-multi-assign': [error],
+      'no-multiple-empty-lines': [error, {max: 3, maxBOF: 1, maxEOF: 1}],
+      'no-nested-ternary': [error],
+      'no-new-object': [error],
+      'no-tabs': [error],
+      'no-trailing-spaces': [error],
+      'no-unneeded-ternary': [error],
+      'no-whitespace-before-property': [error],
+      'nonblock-statement-body-position': [error, 'beside'],
+      'prefer-exponentiation-operator': [error],
+      'quote-props': [error, 'as-needed'],
+      'semi-spacing': [error],
+      'semi-style': [error],
+      'space-before-function-paren': [error, never],
+      'space-infix-ops': [error],
+      'spaced-comment': [error, always],
+      'switch-colon-spacing': [error],
+      'no-duplicate-imports': [error],
+      'no-useless-computed-key': [error],
+      'no-useless-constructor': [error],
+      'no-var': [error],
+      'prefer-const': [error],
+      'prefer-rest-params': [error]
+    },
+  }
+]);

package/package.json

@@ -1,11 +1,12 @@
 {
   "name": "@techexp/webitem",
-  "version": "0.5.3",
+  "version": "0.7.0",
   "description": "Library to simplify creating Web Components/Custom Elements",
   "author": "Abdul Habra",
   "license": "Apache",
   "repository": "ahabra/webitem",
   "main": "dist/webitem-esm.js",
+  "type": "module",
   "keywords": [
     "web component",
     "custom element"
@@ -29,18 +30,18 @@
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
-    "@web/test-runner": "^0.18.0",
+    "@web/test-runner": "^0.20.2",
     "@web/test-runner-commands": "^0.9.0",
-    "@web/test-runner-puppeteer": "^0.15.0",
-    "chalk": "^5.3.0",
-    "esbuild": "^0.19.10",
-    "eslint": "^8.56.0",
-    "fs-extra": "^11.2.0",
-    "npm-check-updates": "^16.14.12",
-    "serve": "^14.2.1"
+    "@web/test-runner-puppeteer": "^0.18.0",
+    "chalk": "^5.6.2",
+    "esbuild": "^0.27.2",
+    "eslint": "^9.39.2",
+    "fs-extra": "^11.3.3",
+    "npm-check-updates": "^19.3.1",
+    "serve": "^14.2.5"
   },
   "dependencies": {
-    "@techexp/data-bind": "^0.9.3",
-    "@techexp/jshelper": "^0.6.3"
+    "@techexp/data-bind": "^0.9.5",
+    "@techexp/jshelper": "^0.7.2"
   }
 }

package/src/index.html

@@ -1,4 +1,4 @@
-<html>
+<html lang="en">
   <head>
     <title>WebItem Visual Test</title>
     <style>

package/src/test/perf-test.css

@@ -0,0 +1,3 @@
+h1 {
+  color: red;
+}

package/src/test/webitem.perf.test.js

@@ -0,0 +1,107 @@
+import {expect} from '@esm-bundle/chai'
+import * as webitem from '../webitem'
+import {Domer} from "@techexp/jshelper";
+
+describe('webitem performance tests', () => {
+  const pathToLocalCss = 'src/test/perf-test.css'
+  const propertyList = [ {name: 'life', value:42} ]
+  const count = 10000
+
+  console.log(`Each benchmark repeats ${count} times:`)
+
+  it('benchmark with no css', () => {
+    const nameWithDash = 'wi-perf-no-css'
+    const html = `<h1>${nameWithDash}</h1>`
+
+    const wasCreated = webitem.defineElement({nameWithDash, html, propertyList})
+    expect(wasCreated).to.be.true
+    const el = createAndAddElement(nameWithDash, `hello`)
+    expect(getH1Color(el)).to.equal('rgb(0, 0, 0)')
+
+    const usualDelay = 80
+    benchmark('No CSS', nameWithDash, count, usualDelay)
+  })
+
+  it('benchmark with style in body', () => {
+    const nameWithDash = 'wi-perf-style-in-body'
+    const html = `
+      <style>
+        h1 { color: red; }
+      </style>
+      <h1>${nameWithDash}</h1>`
+
+    const wasCreated = webitem.defineElement({nameWithDash, html, propertyList})
+    expect(wasCreated).to.be.true
+    const el = createAndAddElement(nameWithDash, `hello`)
+    expect(getH1Color(el)).to.equal('rgb(255, 0, 0)')
+
+    const usualDelay = 80
+    benchmark('CSS style in body', nameWithDash, count, usualDelay)
+  })
+
+
+  it('benchmark with css link in html', () => {
+    const nameWithDash = 'wi-perf-css-in-html'
+    const html = `
+      <link rel="stylesheet" href="${pathToLocalCss}">
+      <h1>${nameWithDash}</h1>`
+
+    const wasCreated = webitem.defineElement({nameWithDash, html, propertyList})
+    expect(wasCreated).to.be.true
+    const el = createAndAddElement(nameWithDash, `hello`)
+    // FIXME why does this fail?
+    // expect(getH1Color(el)).to.equal('rgb(255, 0, 0)')
+
+    const usualDelay = 140
+    benchmark('CSS link in html', nameWithDash, count, usualDelay)
+  })
+
+  it('benchmark with constructable sheet', () => {
+    const nameWithDash = 'wi-perf-constructable-sheet'
+    const html = `<h1 id="title">${nameWithDash}</h1>`
+
+    const sheet = new CSSStyleSheet()
+    sheet.replaceSync('h1 { color: red; }')
+
+    const styleSheets = [sheet]
+
+    const wasCreated = webitem.defineElement({nameWithDash, html,
+      styleSheets,
+      propertyList})
+    expect(wasCreated).to.be.true
+    const el = createAndAddElement(nameWithDash, `hello`)
+    expect(getH1Color(el)).to.equal('rgb(255, 0, 0)')
+
+    const usualDelay = 70
+    benchmark('Constructable sheet', nameWithDash, count, usualDelay)
+  })
+
+})
+
+function benchmark(title, wiName, count, usualDelay) {
+  // warm up
+  for (let i=0; i< 100; i++) {
+    const el = createAndAddElement(wiName, `hello ${i}`)
+    expect(el.wi.properties.life).to.equal(42)
+  }
+
+  const t0 = Date.now()
+  for (let i=0; i< count; i++) {
+    createAndAddElement(wiName, `hello ${i}`)
+  }
+  const end = Date.now()
+  console.log(`${title}: Duration=${end-t0} millis. Usually about ${usualDelay} millis.`)
+}
+
+function createAndAddElement(name, content) {
+  const el = Domer.createElement(name, {}, content)
+  document.body.appendChild(el)
+  return el
+}
+
+function getH1Color(el) {
+  const h1 = Domer.first('h1', el.shadowRoot)
+  const style = window.getComputedStyle(h1)
+  return style.color
+}
+

package/src/test/webitem.test.js

@@ -5,7 +5,7 @@ import {Domer, Objecter} from '@techexp/jshelper'
 
 describe('webitem.defineElement()', () => {
 
-  describe('element creattion', () => {
+  describe('element creation', () => {
     it('creates a new element', () => {
       const name = 'wi-t1'
       webitem.defineElement({nameWithDash: name})

package/src/webitem.js

@@ -3,32 +3,35 @@ import bind from '@techexp/data-bind'
 
 /**
  * Define a custom element
+ *
  * @param options An object containing the following fields
- * nameWithDash: Required. String. Name of the custom element.
- * html: Optional. String or Function. The HTML content of the element
- * css: Optional. String. The CSS to apply on the element
- * propertyList: Optional. Array. Objects defining properties of the element. Each property
+ * * `nameWithDash`: Required. String. Name of the custom element.
+ * * `html`: Optional. String or Function. The HTML content of the element
+ * * `css`: Optional. String. The CSS to apply on the element
+ * * `styleSheets`: Optional: An array of `CSSStyleSheet` objects. This way you can share
+ * style sheets among components.
+ * * `propertyList`: Optional. Array. Objects defining properties of the element. Each property
  * definition consists of {name, value, [sel], [attr], [onChange]}
- * actionList: Optional. Array. Objects defining actions. Each action definition consists of
+ * * `actionList`: Optional. Array. Objects defining actions. Each action definition consists of
  * {name, action}, where action is a function definition.
- * eventHandlerList: Optional. Array. Objects defining event handlers of element. Each
+ * * `eventHandlerList`: Optional. Array. Objects defining event handlers of element. Each
  * handler definition consists of {sel, eventName, listener}
- * display: Optional. String. CSS display attribute. One of inline (default), inline-block, block.
- * @returns true if the element was created, false if the element already exists, in which case
+ * * `display`: Optional. String. CSS display attribute. One of inline (default), inline-block, block.
+ * @returns `true` if the element was created, `false` if the element already exists, in which case
  * it will not be re-created.
  *
- * The created element is a standard DOM custom element with and extra property "wi" that
+ * The created element is a standard DOM custom element with and extra property `wi` that
  * contains the following members:
- * properties: an object that contains all the defined properties in propertyList
- * actions: an object that contains all the defined actions in actionList
- * addProperty(name, value, sel, attr, onChange): a function with the given arguments to
+ * * `properties`: an object that contains all the defined properties in propertyList
+ * * `actions`: an object that contains all the defined actions in actionList
+ * * `addProperty(name, value, sel, attr, onChange)`: a function with the given arguments to
  * add new properties on the instance of the web element
- * addAction(name, action): a function with the given arguments to add new actions
+ * * `addAction(name, action)`: a function with the given arguments to add new actions
  * on the instance of the web element
- * addEventListener(sel, eventName, listener): a function with the given arguments to
+ * * `addEventListener(sel, eventName, listener)`: a function with the given arguments to
  * add new event listeners on the instance of the web element
  */
-export function defineElement({nameWithDash, html, css, display,
+export function defineElement({nameWithDash, html, css, styleSheets, display,
   propertyList, actionList, eventHandlerList}) {
 
   if (customElements.get(nameWithDash)) return false
@@ -37,7 +40,7 @@ export function defineElement({nameWithDash, html, css, display,
     constructor() {
       super()
       const root = this
-      addHtml(this, html, css, display)
+      addHtml(this, html, css, styleSheets, display)
       this.wi = {}
       this.wi.properties = bindProperties(this, propertyList)
       this.wi.actions = defineActions(this, actionList)
@@ -117,12 +120,15 @@ function addHandler(root, {sel, eventName, listener}) {
   })
 }
 
-function addHtml(root, html, css, display) {
+function addHtml(root, html, css, styleSheets, display) {
   html = getHtml(root, html)
 
   const shadow = root.attachShadow({mode: 'open'})
   const nodes = Domer.createElements(getCss(css, display) + html)
   shadow.append(...nodes)
+  if (Array.isArray(styleSheets) && styleSheets.length > 0) {
+    shadow.adoptedStyleSheets.push(...styleSheets)
+  }
 }
 
 function getHtml(root, html) {

package/.eslintrc.js

@@ -1,92 +0,0 @@
-const error = 'error'
-const readonly = 'readonly'
-const always = 'always'
-const never = 'never'
-
-module.exports = {
-    extends: 'eslint:recommended',
-
-    env: {
-        browser: true,
-        es2021: true
-    },
-
-    parserOptions: {
-        ecmaVersion: 12,
-        sourceType: 'module'
-    },
-
-    globals: {
-        describe: readonly,
-        it: readonly,
-        beforeEach: readonly,
-        afterEach: readonly
-    },
-
-    rules: {
-        indent: [error, 2],
-        'linebreak-style': [error, 'unix'],
-        quotes: [error, 'single'],
-        semi: [error, never],
-
-        'block-scoped-var': [error],
-        complexity: [error, 4],
-        'dot-location': [error, 'object'],
-        eqeqeq: [error, always],
-        'no-else-return': [error],
-        'no-multi-spaces': [error, { ignoreEOLComments: true }],
-        'no-octal': [error],
-        'no-octal-escape': [error],
-        'no-return-assign': [error, always],
-        'no-sequences': [error],
-        'no-useless-concat': [error],
-        'no-useless-return': [error],
-        radix: [error],
-        yoda: [error],
-
-        'no-label-var': [error],
-        'brace-style': [error, '1tbs', {allowSingleLine: true}],
-        'comma-spacing': [error, {before: false, after: true}],
-        'comma-style': [error, 'last'],
-        'func-call-spacing': [error, never],
-        'key-spacing': [error, {beforeColon: false, afterColon:true}],
-        'keyword-spacing': [error],
-        'max-depth': [error, 4],
-        'max-len': [error, {code: 120, comments: 100, ignoreUrls: true}],
-        'max-lines': [error, {max: 250, skipBlankLines: true, skipComments: false}],
-        'max-lines-per-function': [error, {max: 200, skipBlankLines: true, skipComments: true, IIFEs: false}],
-        'max-nested-callbacks': [error, 4],
-        'max-params': [error, 5],
-        'max-statements': [error, 10],
-        'max-statements-per-line': [error, {max: 2}],
-        'new-cap': [error],
-        'new-parens': [error, always],
-        'no-array-constructor': [error],
-        'no-bitwise': [error],
-        'no-lonely-if': [error],
-        'no-multi-assign': [error],
-        'no-multiple-empty-lines': [error, {max: 3, maxBOF: 1, maxEOF: 1}],
-        'no-nested-ternary': [error],
-        'no-new-object': [error],
-        'no-tabs': [error],
-        'no-trailing-spaces': [error],
-        'no-unneeded-ternary': [error],
-        'no-whitespace-before-property': [error],
-        'nonblock-statement-body-position': [error, 'beside'],
-        'prefer-exponentiation-operator': [error],
-        'quote-props': [error, 'as-needed'],
-        'semi-spacing': [error],
-        'semi-style': [error],
-        'space-before-function-paren': [error, never],
-        'space-infix-ops': [error],
-        'spaced-comment': [error, always],
-        'switch-colon-spacing': [error],
-        'no-duplicate-imports': [error],
-        'no-useless-computed-key': [error],
-        'no-useless-constructor': [error],
-        'no-var': [error],
-        'prefer-const': [error],
-        'prefer-rest-params': [error]
-
-    }
-}