@techexp/webitem 0.6.0 → 0.7.0

package/README.md

@@ -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>` tagDef 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.6.0.
+// Copyright 2021 (C) Abdul Habra. Version 0.7.0.
 // Apache License Version 2.0
 
 
@@ -12,6 +12,7 @@ function defineElement({
   nameWithDash,
   html,
   css,
+  styleSheets,
   display,
   propertyList,
   actionList,
@@ -22,7 +23,7 @@ function defineElement({
     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);
@@ -89,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;

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.6.0.
+// 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 at={};ue(at,{defineElement:()=>Ye});var se=Object.defineProperty,g=(e,t)=>{for(var n in t)se(e,n,{get:t[n],enumerable:!0})},l={};g(l,{add:()=>xe,all:()=>F,classPresentIf:()=>$e,createElement:()=>Ae,createElements:()=>M,first:()=>be,getAttributes:()=>Se,id:()=>Ee,removeElements:()=>Te,setContent:()=>Ne,tag:()=>_});var d={};g(d,{equals:()=>q,forEachEntry:()=>L,has:()=>le,isDate:()=>S,isFunction:()=>P,isInteger:()=>ce,isNil:()=>ae,isNumber:()=>R,isRegExp:()=>j,isString:()=>p});function ae(e){return e==null}function p(e){return m(e,"String")}function P(e){return m(e,"Function")}function S(e){return m(e,"Date")}function R(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 R(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){return O(t)&&(t=t.shadowRoot),e.includes("/")?we(e,t):t.querySelector(e)}function we(e,t){let n=e.split("/").map(r=>r.trim()).filter(r=>r.length>0);for(let r of n)if(t=ve(r,t),t===null)break;return t}function ve(e,t){return e==="shadowRoot"||e==="shadow-root"?t.shadowRoot:t.querySelector(e)}function O(e){return e&&e.shadowRoot&&e.tagName.includes("-")}function Se(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 Ae(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=Le(t);return`<${e}${r}>${n}</${e}>`}function Le(e){let t=[];return L(e,(r,i)=>{t.push(`${r}="${i}"`)}),(t.length>0?" ":"")+t.join(" ")}var Oe=new Set(["beforebegin","afterbegin","beforeend","afterend"]);function xe(e,t,n="beforeend"){return n=n.toLowerCase(),Oe.has(n)?(p(t)?e.insertAdjacentHTML(n,t):Ce(e,t,n),!0):!1}function Ce(e,t,n){Array.isArray(t)?t.forEach(r=>e.insertAdjacentElement(n,r)):e.insertAdjacentElement(n,t)}function Ne(e,...t){e.innerHTML="",e.append(...t)}function Te(e,t=document){F(e,t).forEach(r=>{r.parentNode.removeChild(r)})}function $e(e,t,n){if(!e)return;let r=n?"add":"remove";e.classList[r](t)}var h={};g(h,{endsWith:()=>D,indexOf:()=>x,indexOfFirstMatch:()=>Pe,indexOfLastMatch:()=>Re,isEmpty:()=>y,removePrefix:()=>H,removeSuffix:()=>I,removeSurrounding:()=>je,replaceAll:()=>V,replaceTemplate:()=>Me,startsWith:()=>W,strip:()=>De,stripEnd:()=>We,stripStart:()=>_e,substringAfter:()=>qe,substringBefore:()=>Fe,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 Pe(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 je(e,t,n,r=!1){return I(H(e,t,r),n,r)}function qe(e,t,n=!1){if(!t)return e;let r=x(e,t,0,n);return r<0?"":e.substring(r+t.length)}function Fe(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(P(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 Me(e="",t={},n="${",r="}"){return L(t,(i,u)=>{u!==void 0&&(i=n+i+r,e=V(e,i,u))}),e}function _e(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 We(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 De(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 He={};g(He,{compareLines:()=>Ie});function Ie(e,t,{trim:n=!0,skipEmpty:r=!0,caseSensitive:i=!0}={trim:!0,skipEmpty:!0,caseSensitive:!0}){return e=$(e,{trim:n,skipEmpty:r}),t=$(t,{trim:n,skipEmpty:r}),e.length!==t.length?`t1 has ${e.length} lines(s) while t2 has ${t.length} line(s).`:Ve(e,t,i)}function Ve(e,t,n){for(let r=0;r<e.length;r++){let i=ke(e[r],t[r],r,n);if(i.length>0)return i}return""}function ke(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}){Xe(t),ze(e,t);let s={};return u||(u=()=>Ge({prop:t,sel:n,attr:r,root:i,objNotBound:s})),o||(o=a=>Je({prop:t,value:a,root:i,sel:n,attr:r,objNotBound:s})),Be({obj:e,prop:t,getter:u,setter:o,onChange:f})}function Be({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 ze(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 Ge({prop:e,root:t,sel:n,attr:r,objNotBound:i}){return n?Ke(t,n,r):i[e]}function Je({prop:e,value:t,root:n,sel:r,attr:i,objNotBound:u}){if(r){Qe(n,r,t,i);return}u[e]=t}function Ke(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 Qe(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=>Ue(o,n,r))}function Ue(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 Xe(e){if(typeof e!="string"||e.length===0)throw"'prop' argument must be a String defining the name a property."}function Ye({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;it(this,t,n,r),this.wi={},this.wi.properties=Ze(this,i),this.wi.actions=nt(this,u),rt(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 Ze(e,t){let n={};return tt(t)&&t.forEach(r=>U(n,r,e)),n}function U(e,t,n){let r=et(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 et(e,t){if(e.onChange)return(n,r)=>e.onChange(t,n,r)}function tt(e){if(!e)return!1;if(!Array.isArray(e))throw"propertyList must be an array of {name, value, [sel], [attr]} objects";return!0}function nt(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 rt(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 it(e,t,n,r){t=ut(e,t);let i=e.attachShadow({mode:"open"}),u=l.createElements(ot(n,r)+t);i.append(...u)}function ut(e,t){return d.isFunction(t)?t(e):t}function ot(e,t){return st(t)+ft(e)}function ft(e){return e=h.trim(e),e.length===0?"":(h.startsWith(e,"<style>",!1)||(e=l.tag("style",{},e)),e)}function st(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(at);})();
+  `}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.6.0.
+// Copyright 2021 (C) Abdul Habra. Version 0.7.0.
 // Apache License Version 2.0
 
 
@@ -575,6 +575,7 @@ ${t2}`;
     nameWithDash,
     html,
     css,
+    styleSheets,
     display,
     propertyList,
     actionList,
@@ -585,7 +586,7 @@ ${t2}`;
       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);
@@ -652,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;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@techexp/webitem",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "description": "Library to simplify creating Web Components/Custom Elements",
   "author": "Abdul Habra",
   "license": "Apache",
@@ -33,15 +33,15 @@
     "@web/test-runner": "^0.20.2",
     "@web/test-runner-commands": "^0.9.0",
     "@web/test-runner-puppeteer": "^0.18.0",
-    "chalk": "^5.4.1",
-    "esbuild": "^0.25.4",
-    "eslint": "^9.27.0",
-    "fs-extra": "^11.3.0",
-    "npm-check-updates": "^18.0.1",
-    "serve": "^14.2.4"
+    "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.4",
-    "@techexp/jshelper": "^0.7.0"
+    "@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) {