@techexp/webitem 0.7.1 → 0.8.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +3 -0
- package/dist/webitem-esm.js +9 -1
- package/dist/webitem-script-min.js +5 -5
- package/dist/webitem-script.js +9 -1
- package/package.json +4 -4
- package/src/test/webitem.test.js +35 -1
- package/src/webitem.js +13 -1
package/README.md
CHANGED
|
@@ -120,6 +120,8 @@ functions supported by this library as follows:
|
|
|
120
120
|
defined in the `eventHandlerList` during element definition are available to all
|
|
121
121
|
instances of the web item. The event handler added using `wi.addEventListener()`
|
|
122
122
|
are available only to the particular instance of the web item in the DOM.
|
|
123
|
+
6. `wi.addCss(css)`: Add CSS text to this web element. The CSS will be added as
|
|
124
|
+
a `CSSStyleSheet` object
|
|
123
125
|
|
|
124
126
|
#### Note About Using Common CSS Files
|
|
125
127
|
CSS applied to a web component (_through shadow DOM_) is scoped to the component, it does not interact
|
|
@@ -362,6 +364,7 @@ In the above example, we change the `color` property in the click listener, whic
|
|
|
362
364
|
callback on the property.
|
|
363
365
|
|
|
364
366
|
## Change Log
|
|
367
|
+
* 2025-04-09: Add `addCss(css)` function.
|
|
365
368
|
* 2021-03-29:
|
|
366
369
|
1. Move all custom properties and function to be inside a single object `wi`. This can
|
|
367
370
|
break code using version <= 0.3.6
|
package/dist/webitem-esm.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
// webitem.js Library to simplify creating HTML5 Custom Elements
|
|
2
2
|
// https://github.com/ahabra/webitem
|
|
3
|
-
// Copyright 2021 (C) Abdul Habra. Version 0.
|
|
3
|
+
// Copyright 2021 (C) Abdul Habra. Version 0.8.0.
|
|
4
4
|
// Apache License Version 2.0
|
|
5
5
|
|
|
6
6
|
|
|
@@ -34,6 +34,7 @@ function defineElement({
|
|
|
34
34
|
};
|
|
35
35
|
this.wi.addAction = (name, action) => addAction(root, root.wi.actions, name, action);
|
|
36
36
|
this.wi.addEventListener = (sel, eventName, listener) => addHandler(root, { sel, eventName, listener });
|
|
37
|
+
this.wi.addCss = (css2) => addCss(root, css2);
|
|
37
38
|
}
|
|
38
39
|
};
|
|
39
40
|
customElements.define(nameWithDash, el);
|
|
@@ -123,6 +124,13 @@ function displayStyle(display) {
|
|
|
123
124
|
</style>
|
|
124
125
|
`;
|
|
125
126
|
}
|
|
127
|
+
function addCss(root, css) {
|
|
128
|
+
css = Stringer.trim(css);
|
|
129
|
+
if (css.length === 0) return;
|
|
130
|
+
const sheet = new CSSStyleSheet();
|
|
131
|
+
sheet.replaceSync(css);
|
|
132
|
+
root.shadowRoot.adoptedStyleSheets.push(sheet);
|
|
133
|
+
}
|
|
126
134
|
export {
|
|
127
135
|
defineElement
|
|
128
136
|
};
|
|
@@ -1,15 +1,15 @@
|
|
|
1
1
|
// webitem.js Library to simplify creating HTML5 Custom Elements
|
|
2
2
|
// https://github.com/ahabra/webitem
|
|
3
|
-
// Copyright 2021 (C) Abdul Habra. Version 0.
|
|
3
|
+
// Copyright 2021 (C) Abdul Habra. Version 0.8.0.
|
|
4
4
|
// Apache License Version 2.0
|
|
5
5
|
|
|
6
6
|
|
|
7
|
-
var webitem=(()=>{var
|
|
7
|
+
var webitem=(()=>{var v=Object.defineProperty;var re=Object.getOwnPropertyDescriptor;var ie=Object.getOwnPropertyNames;var ue=Object.prototype.hasOwnProperty;var oe=(e,t)=>{for(var n in t)v(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&&v(e,i,{get:()=>t[i],enumerable:!(r=re(t,i))||r.enumerable});return e};var se=e=>fe(v({},"__esModule",{value:!0}),e);var lt={};oe(lt,{defineElement:()=>Ze});var ae=Object.defineProperty,p=(e,t)=>{for(var n in t)ae(e,n,{get:t[n],enumerable:!0})},d={};p(d,{add:()=>xe,all:()=>M,classPresentIf:()=>Re,createElement:()=>Le,createElements:()=>_,first:()=>be,getAttributes:()=>Ae,id:()=>Se,removeElements:()=>$e,setContent:()=>Te,tag:()=>W});var m={};p(m,{equals:()=>F,forEachEntry:()=>C,has:()=>de,isDate:()=>A,isFunction:()=>P,isInteger:()=>le,isNil:()=>ce,isNumber:()=>j,isRegExp:()=>q,isString:()=>y});function ce(e){return e==null}function y(e){return h(e,"String")}function P(e){return h(e,"Function")}function A(e){return h(e,"Date")}function j(e){return h(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 h(e,"RegExp")}function h(e,t){return Object.prototype.toString.call(e)===`[object ${t}]`}function C(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 Se(e,t=document){return O(t)&&(t=t.shadowRoot),t.getElementById(e)}function M(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 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=Ce(t);return`<${e}${r}>${n}</${e}>`}function Ce(e){let t=[];return C(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)?(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 Re(e,t,n){if(!e)return;let r=n?"add":"remove";e.classList[r](t)}var c={};p(c,{endsWith:()=>H,indexOf:()=>x,indexOfFirstMatch:()=>Pe,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 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 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=x(e,t,0,n);return r<0?"":e.substring(r+t.length)}function Me(e,t,n=!1){if(!t)return"";let r=x(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(P(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 C(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=R(e,{trim:n,skipEmpty:r}),t=R(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.
|
|
8
8
|
${e}
|
|
9
|
-
${t}`:""}function
|
|
10
|
-
`),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
|
|
9
|
+
${t}`:""}function R(e,{trim:t,skipEmpty:n}){return t&&(e=L(e)),e=e.split(`
|
|
10
|
+
`),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 S=e=>e.type==="checkbox",b=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(S(i))return r.filter(u=>S(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(!(b(i)&&(i=r.filter(b).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(S(u)){let o=G(n);i.filter(S).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(b(u)){i.filter(b).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,l,w,ee,te){let ne={name:a,value:l,sel:w,attr:ee,onChange:te};X(s.wi.properties,ne,s)},this.wi.addAction=(a,l)=>Y(s,s.wi.actions,a,l),this.wi.addEventListener=(a,l,w)=>Z(s,{sel:a,eventName:l,listener:w}),this.wi.addCss=a=>ct(s,a)}};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){!m.isString(n)||!m.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}){d.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=d.createElements(ft(n,i)+t);u.append(...o),Array.isArray(r)&&r.length>0&&u.adoptedStyleSheets.push(...r)}function ot(e,t){return m.isFunction(t)?t(e):t}function ft(e,t){return at(t)+st(e)}function st(e){return e=c.trim(e),e.length===0?"":(c.startsWith(e,"<style>",!1)||(e=d.tag("style",{},e)),e)}function at(e){return e=c.trim(e),e.length===0?"":`
|
|
11
11
|
<style>
|
|
12
12
|
:host { display: ${e};}
|
|
13
13
|
:host([hidden]) {display: none;}
|
|
14
14
|
</style>
|
|
15
|
-
`}return se(
|
|
15
|
+
`}function ct(e,t){if(t=c.trim(t),t.length===0)return;let n=new CSSStyleSheet;n.replaceSync(t),e.shadowRoot.adoptedStyleSheets.push(n)}return se(lt);})();
|
package/dist/webitem-script.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
// webitem.js Library to simplify creating HTML5 Custom Elements
|
|
2
2
|
// https://github.com/ahabra/webitem
|
|
3
|
-
// Copyright 2021 (C) Abdul Habra. Version 0.
|
|
3
|
+
// Copyright 2021 (C) Abdul Habra. Version 0.8.0.
|
|
4
4
|
// Apache License Version 2.0
|
|
5
5
|
|
|
6
6
|
|
|
@@ -597,6 +597,7 @@ ${t2}`;
|
|
|
597
597
|
};
|
|
598
598
|
this.wi.addAction = (name, action) => addAction(root, root.wi.actions, name, action);
|
|
599
599
|
this.wi.addEventListener = (sel, eventName, listener) => addHandler(root, { sel, eventName, listener });
|
|
600
|
+
this.wi.addCss = (css2) => addCss(root, css2);
|
|
600
601
|
}
|
|
601
602
|
};
|
|
602
603
|
customElements.define(nameWithDash, el);
|
|
@@ -686,5 +687,12 @@ ${t2}`;
|
|
|
686
687
|
</style>
|
|
687
688
|
`;
|
|
688
689
|
}
|
|
690
|
+
function addCss(root, css) {
|
|
691
|
+
css = Stringer_exports.trim(css);
|
|
692
|
+
if (css.length === 0) return;
|
|
693
|
+
const sheet = new CSSStyleSheet();
|
|
694
|
+
sheet.replaceSync(css);
|
|
695
|
+
root.shadowRoot.adoptedStyleSheets.push(sheet);
|
|
696
|
+
}
|
|
689
697
|
return __toCommonJS(webitem_exports);
|
|
690
698
|
})();
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@techexp/webitem",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.8.0",
|
|
4
4
|
"description": "Library to simplify creating Web Components/Custom Elements",
|
|
5
5
|
"author": "Abdul Habra",
|
|
6
6
|
"license": "Apache",
|
|
@@ -37,11 +37,11 @@
|
|
|
37
37
|
"esbuild": "^0.27.2",
|
|
38
38
|
"eslint": "^9.39.2",
|
|
39
39
|
"fs-extra": "^11.3.3",
|
|
40
|
-
"npm-check-updates": "^19.3.
|
|
40
|
+
"npm-check-updates": "^19.3.2",
|
|
41
41
|
"serve": "^14.2.5"
|
|
42
42
|
},
|
|
43
43
|
"dependencies": {
|
|
44
|
-
"@techexp/data-bind": "^0.9.
|
|
45
|
-
"@techexp/jshelper": "^0.7.
|
|
44
|
+
"@techexp/data-bind": "^0.9.6",
|
|
45
|
+
"@techexp/jshelper": "^0.7.3"
|
|
46
46
|
}
|
|
47
47
|
}
|
package/src/test/webitem.test.js
CHANGED
|
@@ -214,7 +214,7 @@ describe('webitem.defineElement()', () => {
|
|
|
214
214
|
expect(el.wi.actions.foo()).to.equal(42)
|
|
215
215
|
})
|
|
216
216
|
|
|
217
|
-
it('added action has its [this] equal to the
|
|
217
|
+
it('added action has its [this] equal to the webItem instance', ()=> {
|
|
218
218
|
const nameWithDash = 'wi-t14'
|
|
219
219
|
const html = `<h3>${nameWithDash} - addAction - THIS</h3>`
|
|
220
220
|
webitem.defineElement({nameWithDash, html})
|
|
@@ -227,6 +227,19 @@ describe('webitem.defineElement()', () => {
|
|
|
227
227
|
expect(el.wi.actions.foo()).to.equal(el)
|
|
228
228
|
})
|
|
229
229
|
|
|
230
|
+
it('passes element parameters to action', ()=> {
|
|
231
|
+
const nameWithDash = 'wi-t14-1'
|
|
232
|
+
const html = `<h3>${nameWithDash} - addAction - argument</h3>`
|
|
233
|
+
webitem.defineElement({nameWithDash, html})
|
|
234
|
+
const el = createAndAddElement(nameWithDash)
|
|
235
|
+
|
|
236
|
+
el.wi.addAction('add', function(a, b, c) {
|
|
237
|
+
return a + b + c
|
|
238
|
+
})
|
|
239
|
+
|
|
240
|
+
expect(el.wi.actions.add(1, 2, 3)).to.equal(6)
|
|
241
|
+
})
|
|
242
|
+
|
|
230
243
|
})
|
|
231
244
|
|
|
232
245
|
describe('addEventListener', ()=> {
|
|
@@ -247,6 +260,27 @@ describe('webitem.defineElement()', () => {
|
|
|
247
260
|
})
|
|
248
261
|
})
|
|
249
262
|
|
|
263
|
+
describe('addCss', ()=> {
|
|
264
|
+
it('adds CSS to the element', ()=> {
|
|
265
|
+
const nameWithDash = 'wi-t16'
|
|
266
|
+
const html = `<h3>${nameWithDash} - addCss</h3>`
|
|
267
|
+
|
|
268
|
+
webitem.defineElement({nameWithDash, html})
|
|
269
|
+
const el = createAndAddElement(nameWithDash)
|
|
270
|
+
|
|
271
|
+
const h3 = Domer.first('h3', el.shadowRoot)
|
|
272
|
+
const initialColor = window.getComputedStyle(h3).color
|
|
273
|
+
|
|
274
|
+
el.wi.addCss(`h3 {color: red !important}`)
|
|
275
|
+
|
|
276
|
+
const newColor = window.getComputedStyle(h3).color
|
|
277
|
+
expect(newColor).to.not.equal(initialColor)
|
|
278
|
+
expect(newColor).to.equal('rgb(255, 0, 0)')
|
|
279
|
+
})
|
|
280
|
+
|
|
281
|
+
|
|
282
|
+
})
|
|
283
|
+
|
|
250
284
|
}) // webitem.defineElement()
|
|
251
285
|
|
|
252
286
|
function findElementByName(name) {
|
package/src/webitem.js
CHANGED
|
@@ -30,6 +30,7 @@ import bind from '@techexp/data-bind'
|
|
|
30
30
|
* on the instance of the web element
|
|
31
31
|
* * `addEventListener(sel, eventName, listener)`: a function with the given arguments to
|
|
32
32
|
* add new event listeners on the instance of the web element
|
|
33
|
+
* * `addCss(css)`: a function that will add live css to the current web element
|
|
33
34
|
*/
|
|
34
35
|
export function defineElement({nameWithDash, html, css, styleSheets, display,
|
|
35
36
|
propertyList, actionList, eventHandlerList}) {
|
|
@@ -52,7 +53,7 @@ export function defineElement({nameWithDash, html, css, styleSheets, display,
|
|
|
52
53
|
}
|
|
53
54
|
this.wi.addAction = (name, action) => addAction(root, root.wi.actions, name, action)
|
|
54
55
|
this.wi.addEventListener = (sel, eventName, listener) => addHandler(root, {sel, eventName, listener})
|
|
55
|
-
|
|
56
|
+
this.wi.addCss = css => addCss(root, css)
|
|
56
57
|
}
|
|
57
58
|
}
|
|
58
59
|
customElements.define(nameWithDash, el)
|
|
@@ -160,3 +161,14 @@ function displayStyle(display) {
|
|
|
160
161
|
`
|
|
161
162
|
}
|
|
162
163
|
|
|
164
|
+
function addCss(root, css) {
|
|
165
|
+
css = Stringer.trim(css)
|
|
166
|
+
if (css.length === 0) return
|
|
167
|
+
// TODO prevent adding the same CSS if it is already there
|
|
168
|
+
|
|
169
|
+
const sheet = new CSSStyleSheet()
|
|
170
|
+
sheet.replaceSync(css)
|
|
171
|
+
root.shadowRoot.adoptedStyleSheets.push(sheet)
|
|
172
|
+
}
|
|
173
|
+
|
|
174
|
+
|