Hello, {children}!
; - -new DOMRenderer().render(
- Hello,
- );
- }
-}
-
-new DOMRenderer().render(
- <>
- Hello, {this.name}!
; - } -} - -new DOMRenderer().render(| 1 | -A | -- - | -
| 2 | -B | -- - | -
| 3 | -C | -- - | -
Async Component in {children}
; -}); - -new DOMRenderer().render(Async
;
-
-export default AsyncTag;
-```
-
-#### `index.tsx`
-
-```tsx
-import { DOMRenderer } from 'dom-renderer';
-import { lazy } from 'web-cell';
-
-const AsyncTag = lazy(() => import('./AsyncTag'));
-
-new DOMRenderer().render(Fade In
} /> -); -``` - -## Node.js usage - -### Tool chain - -```shell -npm install jsdom -``` - -### Polyfill - -```js -import 'web-cell/polyfill'; -``` - -### Server Side Rendering - -https://github.com/EasyWebApp/DOM-Renderer?tab=readme-ov-file#nodejs--bun - -## Basic knowledge - -- [Web components][23] -- [Custom elements][24] -- [Shadow DOM][25] -- [Element Internals][26] -- [CSS variables][27] -- [View transitions][28] -- [ECMAScript 6+][29] -- [TypeScript 5+][4] - -## Life Cycle hooks - -1. [`connectedCallback`][30] -2. [`disconnectedCallback`][31] -3. [`attributeChangedCallback`][32] -4. [`adoptedCallback`][33] -5. [`updatedCallback`][34] -6. [`mountedCallback`][35] -7. [`formAssociatedCallback`][36] -8. [`formDisabledCallback`][37] -9. [`formResetCallback`][38] -10. [`formStateRestoreCallback`][39] - -## Scaffolds - -1. [Basic][22] -2. [DashBoard][40] -3. [Mobile][41] -4. [Static site][42] - -## Ecosystem - -We recommend these libraries to use with WebCell: - -- **State management**: [MobX][3] (also powered by **TypeScript** & **Decorator**) -- **Router**: [Cell Router][43] -- **UI components** - - [BootCell][44] (based on **BootStrap v5**) - - [MDUI][45] (based on **Material Design v3**) - - [GitHub Web Widget][46] - -- **HTTP request**: [KoAJAX][47] (based on **Koa**-like middlewares) -- **Utility**: [Web utility][48] methods & types -- **Event stream**: [Iterable Observer][49] (`Observable` proposal) -- **MarkDown integration**: [Parcel MDX transformer][50] (**MDX** Compiler plugin) - -## Roadmap - -- [x] [Server-side Render][51] -- [x] [Async Component loading][52] - -## [v2 to v3 migration](./guide/Migrating.md) - -## More guides - -1. [Development contribution](./guide/Contributing.md) - -[1]: https://www.webcomponents.org/ -[2]: https://facebook.github.io/jsx/ -[3]: https://mobx.js.org/ -[4]: https://www.typescriptlang.org/ -[5]: https://libraries.io/npm/web-cell -[6]: https://github.com/EasyWebApp/WebCell/actions/workflows/main.yml -[7]: https://github.com/996icu/996.ICU/blob/master/LICENSE -[8]: https://github.com/jaywcjlove/awesome-uikit -[9]: https://tech-query.me/programming/web-components-practise/slide.html -[10]: https://gitter.im/EasyWebApp/community?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge -[11]: https://codesandbox.io/p/devbox/9gyll?embed=1&file=%2Fsrc%2FClock.tsx -[12]: https://nodei.co/npm/web-cell/ -[13]: https://www.typescriptlang.org/ -[14]: https://github.com/tc39/proposal-decorators -[15]: https://legacy.reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html -[16]: https://www.webcomponents.org/ -[17]: https://github.com/EasyWebApp/DOM-Renderer -[18]: https://mobx.js.org/observable-state.html#observable -[19]: https://mobx.js.org/enabling-decorators.html -[20]: https://facebook.github.io/jsx/ -[21]: https://parceljs.org/ -[22]: https://github.com/EasyWebApp/WebCell-scaffold -[23]: https://developer.mozilla.org/en-US/docs/Web/API/Web_components -[24]: https://web.dev/articles/custom-elements-v1 -[25]: https://web.dev/articles/shadowdom-v1 -[26]: https://web.dev/articles/more-capable-form-controls -[27]: https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties -[28]: https://developer.chrome.com/docs/web-platform/view-transitions/ -[29]: https://rse.github.io/es6-features/ -[30]: https://web-cell.dev/web-utility/interfaces/CustomElement.html#connectedCallback -[31]: https://web-cell.dev/web-utility/interfaces/CustomElement.html#disconnectedCallback -[32]: https://web-cell.dev/web-utility/interfaces/CustomElement.html#attributeChangedCallback -[33]: https://web-cell.dev/web-utility/interfaces/CustomElement.html#adoptedCallback -[34]: https://web-cell.dev/WebCell/interfaces/WebCell.html#updatedCallback -[35]: https://web-cell.dev/WebCell/interfaces/WebCell.html#mountedCallback -[36]: https://web-cell.dev/web-utility/interfaces/CustomFormElement.html#formAssociatedCallback -[37]: https://web-cell.dev/web-utility/interfaces/CustomFormElement.html#formDisabledCallback -[38]: https://web-cell.dev/web-utility/interfaces/CustomFormElement.html#formResetCallback -[39]: https://web-cell.dev/web-utility/interfaces/CustomFormElement.html#formStateRestoreCallback -[40]: https://github.com/EasyWebApp/WebCell-dashboard -[41]: https://github.com/EasyWebApp/WebCell-mobile -[42]: https://github.com/EasyWebApp/mark-wiki -[43]: https://web-cell.dev/cell-router/ -[44]: https://bootstrap.web-cell.dev/ -[45]: https://www.mdui.org/ -[46]: https://tech-query.me/GitHub-Web-Widget/ -[47]: https://web-cell.dev/KoAJAX/ -[48]: https://web-cell.dev/web-utility/ -[49]: https://web-cell.dev/iterable-observer/ -[50]: https://github.com/EasyWebApp/Parcel-transformer-MDX -[51]: https://developer.chrome.com/docs/css-ui/declarative-shadow-dom -[52]: https://legacy.reactjs.org/docs/react-api.html#reactlazy diff --git a/guide/table.css b/assets/custom.css similarity index 100% rename from guide/table.css rename to assets/custom.css diff --git a/assets/hierarchy.js b/assets/hierarchy.js new file mode 100644 index 0000000..a54231d --- /dev/null +++ b/assets/hierarchy.js @@ -0,0 +1 @@ +window.hierarchyData = "eJyNj8sOgjAQRf/lrqtGqMV0Z0j8ARcuiIsKY2wsJWnLivTfDeADFj42dzFz5p5MB9c0wUMWIuUnBkcXQ2XQjfWQHXgfVtUEiZ3VtQqUHw5guGlbQa6TLUPrDCRKo7wnv3pTy2uoDdi4gUTw1aI/W4yDyMCzZNK/b+0gzsmYb4Yp99sh0ukPRzrP6pONeNZrG8hdVEl+9aA+lr/QfnnVpnJkIQvOeJawMYVIT71dpHP7XpOpfusH7A9/jPEOQp6Q2g==" \ No newline at end of file diff --git a/assets/highlight.css b/assets/highlight.css new file mode 100644 index 0000000..0cecb1a --- /dev/null +++ b/assets/highlight.css @@ -0,0 +1,148 @@ +:root { + --light-hl-0: #795E26; + --dark-hl-0: #DCDCAA; + --light-hl-1: #000000; + --dark-hl-1: #D4D4D4; + --light-hl-2: #A31515; + --dark-hl-2: #CE9178; + --light-hl-3: #0000FF; + --dark-hl-3: #569CD6; + --light-hl-4: #0451A5; + --dark-hl-4: #9CDCFE; + --light-hl-5: #800000; + --dark-hl-5: #808080; + --light-hl-6: #800000; + --dark-hl-6: #569CD6; + --light-hl-7: #000000FF; + --dark-hl-7: #D4D4D4; + --light-hl-8: #E50000; + --dark-hl-8: #9CDCFE; + --light-hl-9: #0000FF; + --dark-hl-9: #CE9178; + --light-hl-10: #AF00DB; + --dark-hl-10: #C586C0; + --light-hl-11: #001080; + --dark-hl-11: #9CDCFE; + --light-hl-12: #267F99; + --dark-hl-12: #4EC9B0; + --light-hl-13: #008000; + --dark-hl-13: #6A9955; + --light-hl-14: #098658; + --dark-hl-14: #B5CEA8; + --light-hl-15: #0070C1; + --dark-hl-15: #4FC1FF; + --light-hl-16: #800000; + --dark-hl-16: #D7BA7D; + --light-hl-17: #0451A5; + --dark-hl-17: #CE9178; + --light-code-background: #FFFFFF; + --dark-code-background: #1E1E1E; +} + +@media (prefers-color-scheme: light) { :root { + --hl-0: var(--light-hl-0); + --hl-1: var(--light-hl-1); + --hl-2: var(--light-hl-2); + --hl-3: var(--light-hl-3); + --hl-4: var(--light-hl-4); + --hl-5: var(--light-hl-5); + --hl-6: var(--light-hl-6); + --hl-7: var(--light-hl-7); + --hl-8: var(--light-hl-8); + --hl-9: var(--light-hl-9); + --hl-10: var(--light-hl-10); + --hl-11: var(--light-hl-11); + --hl-12: var(--light-hl-12); + --hl-13: var(--light-hl-13); + --hl-14: var(--light-hl-14); + --hl-15: var(--light-hl-15); + --hl-16: var(--light-hl-16); + --hl-17: var(--light-hl-17); + --code-background: var(--light-code-background); +} } + +@media (prefers-color-scheme: dark) { :root { + --hl-0: var(--dark-hl-0); + --hl-1: var(--dark-hl-1); + --hl-2: var(--dark-hl-2); + --hl-3: var(--dark-hl-3); + --hl-4: var(--dark-hl-4); + --hl-5: var(--dark-hl-5); + --hl-6: var(--dark-hl-6); + --hl-7: var(--dark-hl-7); + --hl-8: var(--dark-hl-8); + --hl-9: var(--dark-hl-9); + --hl-10: var(--dark-hl-10); + --hl-11: var(--dark-hl-11); + --hl-12: var(--dark-hl-12); + --hl-13: var(--dark-hl-13); + --hl-14: var(--dark-hl-14); + --hl-15: var(--dark-hl-15); + --hl-16: var(--dark-hl-16); + --hl-17: var(--dark-hl-17); + --code-background: var(--dark-code-background); +} } + +:root[data-theme='light'] { + --hl-0: var(--light-hl-0); + --hl-1: var(--light-hl-1); + --hl-2: var(--light-hl-2); + --hl-3: var(--light-hl-3); + --hl-4: var(--light-hl-4); + --hl-5: var(--light-hl-5); + --hl-6: var(--light-hl-6); + --hl-7: var(--light-hl-7); + --hl-8: var(--light-hl-8); + --hl-9: var(--light-hl-9); + --hl-10: var(--light-hl-10); + --hl-11: var(--light-hl-11); + --hl-12: var(--light-hl-12); + --hl-13: var(--light-hl-13); + --hl-14: var(--light-hl-14); + --hl-15: var(--light-hl-15); + --hl-16: var(--light-hl-16); + --hl-17: var(--light-hl-17); + --code-background: var(--light-code-background); +} + +:root[data-theme='dark'] { + --hl-0: var(--dark-hl-0); + --hl-1: var(--dark-hl-1); + --hl-2: var(--dark-hl-2); + --hl-3: var(--dark-hl-3); + --hl-4: var(--dark-hl-4); + --hl-5: var(--dark-hl-5); + --hl-6: var(--dark-hl-6); + --hl-7: var(--dark-hl-7); + --hl-8: var(--dark-hl-8); + --hl-9: var(--dark-hl-9); + --hl-10: var(--dark-hl-10); + --hl-11: var(--dark-hl-11); + --hl-12: var(--dark-hl-12); + --hl-13: var(--dark-hl-13); + --hl-14: var(--dark-hl-14); + --hl-15: var(--dark-hl-15); + --hl-16: var(--dark-hl-16); + --hl-17: var(--dark-hl-17); + --code-background: var(--dark-code-background); +} + +.hl-0 { color: var(--hl-0); } +.hl-1 { color: var(--hl-1); } +.hl-2 { color: var(--hl-2); } +.hl-3 { color: var(--hl-3); } +.hl-4 { color: var(--hl-4); } +.hl-5 { color: var(--hl-5); } +.hl-6 { color: var(--hl-6); } +.hl-7 { color: var(--hl-7); } +.hl-8 { color: var(--hl-8); } +.hl-9 { color: var(--hl-9); } +.hl-10 { color: var(--hl-10); } +.hl-11 { color: var(--hl-11); } +.hl-12 { color: var(--hl-12); } +.hl-13 { color: var(--hl-13); } +.hl-14 { color: var(--hl-14); } +.hl-15 { color: var(--hl-15); } +.hl-16 { color: var(--hl-16); } +.hl-17 { color: var(--hl-17); } +pre, code { background: var(--code-background); } diff --git a/assets/icons.js b/assets/icons.js new file mode 100644 index 0000000..58882d7 --- /dev/null +++ b/assets/icons.js @@ -0,0 +1,18 @@ +(function() { + addIcons(); + function addIcons() { + if (document.readyState === "loading") return document.addEventListener("DOMContentLoaded", addIcons); + const svg = document.body.appendChild(document.createElementNS("http://www.w3.org/2000/svg", "svg")); + svg.innerHTML = `${e}
`:""}var ct=["button","checkbox","file","hidden","image","radio","range","reset","submit"];function ut(){let t=document.activeElement;return t?t.isContentEditable||t.tagName==="TEXTAREA"||t.tagName==="SEARCH"?!0:t.tagName==="INPUT"&&!ct.includes(t.type):!1}var D="mousedown",Me="mousemove",$="mouseup",ne={x:0,y:0},Qe=!1,ce=!1,dt=!1,F=!1,Oe=/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);document.documentElement.classList.add(Oe?"is-mobile":"not-mobile");Oe&&"ontouchstart"in document.documentElement&&(dt=!0,D="touchstart",Me="touchmove",$="touchend");document.addEventListener(D,t=>{ce=!0,F=!1;let e=D=="touchstart"?t.targetTouches[0]:t;ne.y=e.pageY||0,ne.x=e.pageX||0});document.addEventListener(Me,t=>{if(ce&&!F){let e=D=="touchstart"?t.targetTouches[0]:t,n=ne.x-(e.pageX||0),r=ne.y-(e.pageY||0);F=Math.sqrt(n*n+r*r)>10}});document.addEventListener($,()=>{ce=!1});document.addEventListener("click",t=>{Qe&&(t.preventDefault(),t.stopImmediatePropagation(),Qe=!1)});var re=class extends I{active;className;constructor(e){super(e),this.className=this.el.dataset.toggle||"",this.el.addEventListener($,n=>this.onPointerUp(n)),this.el.addEventListener("click",n=>n.preventDefault()),document.addEventListener(D,n=>this.onDocumentPointerDown(n)),document.addEventListener($,n=>this.onDocumentPointerUp(n))}setActive(e){if(this.active==e)return;this.active=e,document.documentElement.classList.toggle("has-"+this.className,e),this.el.classList.toggle("active",e);let n=(this.active?"to-has-":"from-has-")+this.className;document.documentElement.classList.add(n),setTimeout(()=>document.documentElement.classList.remove(n),500)}onPointerUp(e){F||(this.setActive(!0),e.preventDefault())}onDocumentPointerDown(e){if(this.active){if(e.target.closest(".col-sidebar, .tsd-filter-group"))return;this.setActive(!1)}}onDocumentPointerUp(e){if(!F&&this.active&&e.target.closest(".col-sidebar")){let n=e.target.closest("a");if(n){let r=window.location.href;r.indexOf("#")!=-1&&(r=r.substring(0,r.indexOf("#"))),n.href.substring(0,r.length)==r&&setTimeout(()=>this.setActive(!1),250)}}}};var ue=new Map,de=class{open;accordions=[];key;constructor(e,n){this.key=e,this.open=n}add(e){this.accordions.push(e),e.open=this.open,e.addEventListener("toggle",()=>{this.toggle(e.open)})}toggle(e){for(let n of this.accordions)n.open=e;S.setItem(this.key,e.toString())}},ie=class extends I{constructor(e){super(e);let n=this.el.querySelector("summary"),r=n.querySelector("a");r&&r.addEventListener("click",()=>{location.assign(r.href)});let i=`tsd-accordion-${n.dataset.key??n.textContent.trim().replace(/\s+/g,"-").toLowerCase()}`,s;if(ue.has(i))s=ue.get(i);else{let o=S.getItem(i),a=o?o==="true":this.el.open;s=new de(i,a),ue.set(i,s)}s.add(this.el)}};function He(t){let e=S.getItem("tsd-theme")||"os";t.value=e,Ae(e),t.addEventListener("change",()=>{S.setItem("tsd-theme",t.value),Ae(t.value)})}function Ae(t){document.documentElement.dataset.theme=t}var se;function Ne(){let t=document.getElementById("tsd-nav-script");t&&(t.addEventListener("load",Re),Re())}async function Re(){let t=document.getElementById("tsd-nav-container");if(!t||!window.navigationData)return;let e=await R(window.navigationData);se=document.documentElement.dataset.base,se.endsWith("/")||(se+="/"),t.innerHTML="";for(let n of e)Be(n,t,[]);window.app.createComponents(t),window.app.showPage(),window.app.ensureActivePageVisible()}function Be(t,e,n){let r=e.appendChild(document.createElement("li"));if(t.children){let i=[...n,t.text],s=r.appendChild(document.createElement("details"));s.className=t.class?`${t.class} tsd-accordion`:"tsd-accordion";let o=s.appendChild(document.createElement("summary"));o.className="tsd-accordion-summary",o.dataset.key=i.join("$"),o.innerHTML='',De(t,o);let a=s.appendChild(document.createElement("div"));a.className="tsd-accordion-details";let c=a.appendChild(document.createElement("ul"));c.className="tsd-nested-navigation";for(let l of t.children)Be(l,c,i)}else De(t,r,t.class)}function De(t,e,n){if(t.path){let r=e.appendChild(document.createElement("a"));if(r.href=se+t.path,n&&(r.className=n),location.pathname===r.pathname&&!r.href.includes("#")&&(r.classList.add("current"),r.ariaCurrent="page"),t.kind){let i=window.translations[`kind_${t.kind}`].replaceAll('"',""");r.innerHTML=``}r.appendChild(Fe(t.text,document.createElement("span")))}else{let r=e.appendChild(document.createElement("span")),i=window.translations.folder.replaceAll('"',""");r.innerHTML=``,r.appendChild(Fe(t.text,document.createElement("span")))}}function Fe(t,e){let n=t.split(/(?<=[^A-Z])(?=[A-Z])|(?<=[A-Z])(?=[A-Z][a-z])|(?<=[_-])(?=[^_-])/);for(let r=0;rClass AnimateCSS
Hierarchy (View Summary)
- WebCell<AnimateCSSProps>
- HTMLElement
- AnimateCSS
Implements
Index
Constructors
Properties
Accessors
Methods
Constructors
constructor
Returns AnimateCSS
Properties
component
emit
emit: (event: string, detail?: any, option?: EventInit) => boolean
internals
mounted
mounted: boolean
Optionalmounted
mountedCallback?: () => any
props
props: AnimateCSSProps & DataObject & Pick<VNode, "key" | "is" | "ref"> & Omit<
Partial<
ARIAMixin & EventHandlers<HTMLElement, HTMLElementEventMap> & DOMProps_Read2Write<
Pick<
HTMLElement,
| "tagName"
| "slot"
| "accessKey"
| "accessKeyLabel"
| "autocapitalize"
| "autocorrect"
| "dir"
| "draggable"
| "hidden"
| "inert"
| "innerText"
| "lang"
| "offsetHeight"
| "offsetLeft"
| "offsetParent"
| "offsetTop"
| "offsetWidth"
| "outerText"
| "popover"
| "spellcheck"
| "title"
| "translate"
| "writingSuggestions"
| "attributes"
| "classList"
| "className"
| "clientHeight"
| "clientLeft"
| "clientTop"
| "clientWidth"
| "currentCSSZoom"
| "id"
| "innerHTML"
| "localName"
| "namespaceURI"
| "outerHTML"
| "part"
| "prefix"
| "scrollHeight"
| "scrollLeft"
| "scrollTop"
| "scrollWidth"
| "shadowRoot"
| "ariaActiveDescendantElement"
| "ariaAtomic"
| "ariaAutoComplete"
| "ariaBrailleLabel"
| "ariaBrailleRoleDescription"
| "ariaBusy"
| "ariaChecked"
| "ariaColCount"
| "ariaColIndex"
| "ariaColIndexText"
| "ariaColSpan"
| "ariaControlsElements"
| "ariaCurrent"
| "ariaDescribedByElements"
| "ariaDescription"
| "ariaDetailsElements"
| "ariaDisabled"
| "ariaErrorMessageElements"
| "ariaExpanded"
| "ariaFlowToElements"
| "ariaHasPopup"
| "ariaHidden"
| "ariaInvalid"
| "ariaKeyShortcuts"
| "ariaLabel"
| "ariaLabelledByElements"
| "ariaLevel"
| "ariaLive"
| "ariaModal"
| "ariaMultiLine"
| "ariaMultiSelectable"
| "ariaOrientation"
| "ariaOwnsElements"
| "ariaPlaceholder"
| "ariaPosInSet"
| "ariaPressed"
| "ariaReadOnly"
| "ariaRelevant"
| "ariaRequired"
| "ariaRoleDescription"
| "ariaRowCount"
| "ariaRowIndex"
| "ariaRowIndexText"
| "ariaRowSpan"
| "ariaSelected"
| "ariaSetSize"
| "ariaSort"
| "ariaValueMax"
| "ariaValueMin"
| "ariaValueNow"
| "ariaValueText"
| "role"
| "nextElementSibling"
| "previousElementSibling"
| "childElementCount"
| "children"
| "firstElementChild"
| "lastElementChild"
| "assignedSlot"
| "attributeStyleMap"
| "style"
| "contentEditable"
| "enterKeyHint"
| "inputMode"
| "isContentEditable"
| "autofocus"
| "dataset"
| "nonce"
| "tabIndex",
>,
>,
>,
"children",
> & {}
Partial<
ARIAMixin & EventHandlers<HTMLElement, HTMLElementEventMap> & DOMProps_Read2Write<
Pick<
HTMLElement,
| "tagName"
| "slot"
| "accessKey"
| "accessKeyLabel"
| "autocapitalize"
| "autocorrect"
| "dir"
| "draggable"
| "hidden"
| "inert"
| "innerText"
| "lang"
| "offsetHeight"
| "offsetLeft"
| "offsetParent"
| "offsetTop"
| "offsetWidth"
| "outerText"
| "popover"
| "spellcheck"
| "title"
| "translate"
| "writingSuggestions"
| "attributes"
| "classList"
| "className"
| "clientHeight"
| "clientLeft"
| "clientTop"
| "clientWidth"
| "currentCSSZoom"
| "id"
| "innerHTML"
| "localName"
| "namespaceURI"
| "outerHTML"
| "part"
| "prefix"
| "scrollHeight"
| "scrollLeft"
| "scrollTop"
| "scrollWidth"
| "shadowRoot"
| "ariaActiveDescendantElement"
| "ariaAtomic"
| "ariaAutoComplete"
| "ariaBrailleLabel"
| "ariaBrailleRoleDescription"
| "ariaBusy"
| "ariaChecked"
| "ariaColCount"
| "ariaColIndex"
| "ariaColIndexText"
| "ariaColSpan"
| "ariaControlsElements"
| "ariaCurrent"
| "ariaDescribedByElements"
| "ariaDescription"
| "ariaDetailsElements"
| "ariaDisabled"
| "ariaErrorMessageElements"
| "ariaExpanded"
| "ariaFlowToElements"
| "ariaHasPopup"
| "ariaHidden"
| "ariaInvalid"
| "ariaKeyShortcuts"
| "ariaLabel"
| "ariaLabelledByElements"
| "ariaLevel"
| "ariaLive"
| "ariaModal"
| "ariaMultiLine"
| "ariaMultiSelectable"
| "ariaOrientation"
| "ariaOwnsElements"
| "ariaPlaceholder"
| "ariaPosInSet"
| "ariaPressed"
| "ariaReadOnly"
| "ariaRelevant"
| "ariaRequired"
| "ariaRoleDescription"
| "ariaRowCount"
| "ariaRowIndex"
| "ariaRowIndexText"
| "ariaRowSpan"
| "ariaSelected"
| "ariaSetSize"
| "ariaSort"
| "ariaValueMax"
| "ariaValueMin"
| "ariaValueNow"
| "ariaValueText"
| "role"
| "nextElementSibling"
| "previousElementSibling"
| "childElementCount"
| "children"
| "firstElementChild"
| "lastElementChild"
| "assignedSlot"
| "attributeStyleMap"
| "style"
| "contentEditable"
| "enterKeyHint"
| "inputMode"
| "isContentEditable"
| "autofocus"
| "dataset"
| "nonce"
| "tabIndex",
>,
>,
>,
"children",
> & {}
renderer
renderer: DOMRenderer
root
root: ParentNode
update
Optionalupdated
updatedCallback?: () => any
Called at DOM tree updated
+Class Defer<T>
Type Parameters
- T = void
Index
Constructors
Properties
Class FunctionCell
Hierarchy (View Summary)
- WebCell<FunctionCellProps>
- HTMLElement
- FunctionCell
Implements
Index
Constructors
constructor
Returns FunctionCell
Properties
disconnected
disconnectedCallback: IReactionDisposer = ...
Called every time the element is removed from the DOM.
+emit
emit: (event: string, detail?: any, option?: EventInit) => boolean
internals
mounted
mounted: boolean
Optionalmounted
mountedCallback?: () => any
Called at first time of DOM tree updated
+props
props: FunctionCellProps & DataObject & Pick<VNode, "key" | "is" | "ref"> & Omit<
Partial<
ARIAMixin & EventHandlers<HTMLElement, HTMLElementEventMap> & DOMProps_Read2Write<
Pick<
HTMLElement,
| "tagName"
| "slot"
| "accessKey"
| "accessKeyLabel"
| "autocapitalize"
| "autocorrect"
| "dir"
| "draggable"
| "hidden"
| "inert"
| "innerText"
| "lang"
| "offsetHeight"
| "offsetLeft"
| "offsetParent"
| "offsetTop"
| "offsetWidth"
| "outerText"
| "popover"
| "spellcheck"
| "title"
| "translate"
| "writingSuggestions"
| "attributes"
| "classList"
| "className"
| "clientHeight"
| "clientLeft"
| "clientTop"
| "clientWidth"
| "currentCSSZoom"
| "id"
| "innerHTML"
| "localName"
| "namespaceURI"
| "outerHTML"
| "part"
| "prefix"
| "scrollHeight"
| "scrollLeft"
| "scrollTop"
| "scrollWidth"
| "shadowRoot"
| "ariaActiveDescendantElement"
| "ariaAtomic"
| "ariaAutoComplete"
| "ariaBrailleLabel"
| "ariaBrailleRoleDescription"
| "ariaBusy"
| "ariaChecked"
| "ariaColCount"
| "ariaColIndex"
| "ariaColIndexText"
| "ariaColSpan"
| "ariaControlsElements"
| "ariaCurrent"
| "ariaDescribedByElements"
| "ariaDescription"
| "ariaDetailsElements"
| "ariaDisabled"
| "ariaErrorMessageElements"
| "ariaExpanded"
| "ariaFlowToElements"
| "ariaHasPopup"
| "ariaHidden"
| "ariaInvalid"
| "ariaKeyShortcuts"
| "ariaLabel"
| "ariaLabelledByElements"
| "ariaLevel"
| "ariaLive"
| "ariaModal"
| "ariaMultiLine"
| "ariaMultiSelectable"
| "ariaOrientation"
| "ariaOwnsElements"
| "ariaPlaceholder"
| "ariaPosInSet"
| "ariaPressed"
| "ariaReadOnly"
| "ariaRelevant"
| "ariaRequired"
| "ariaRoleDescription"
| "ariaRowCount"
| "ariaRowIndex"
| "ariaRowIndexText"
| "ariaRowSpan"
| "ariaSelected"
| "ariaSetSize"
| "ariaSort"
| "ariaValueMax"
| "ariaValueMin"
| "ariaValueNow"
| "ariaValueText"
| "role"
| "nextElementSibling"
| "previousElementSibling"
| "childElementCount"
| "children"
| "firstElementChild"
| "lastElementChild"
| "assignedSlot"
| "attributeStyleMap"
| "style"
| "contentEditable"
| "enterKeyHint"
| "inputMode"
| "isContentEditable"
| "autofocus"
| "dataset"
| "nonce"
| "tabIndex",
>,
>,
>,
"children",
> & {}
Partial<
ARIAMixin & EventHandlers<HTMLElement, HTMLElementEventMap> & DOMProps_Read2Write<
Pick<
HTMLElement,
| "tagName"
| "slot"
| "accessKey"
| "accessKeyLabel"
| "autocapitalize"
| "autocorrect"
| "dir"
| "draggable"
| "hidden"
| "inert"
| "innerText"
| "lang"
| "offsetHeight"
| "offsetLeft"
| "offsetParent"
| "offsetTop"
| "offsetWidth"
| "outerText"
| "popover"
| "spellcheck"
| "title"
| "translate"
| "writingSuggestions"
| "attributes"
| "classList"
| "className"
| "clientHeight"
| "clientLeft"
| "clientTop"
| "clientWidth"
| "currentCSSZoom"
| "id"
| "innerHTML"
| "localName"
| "namespaceURI"
| "outerHTML"
| "part"
| "prefix"
| "scrollHeight"
| "scrollLeft"
| "scrollTop"
| "scrollWidth"
| "shadowRoot"
| "ariaActiveDescendantElement"
| "ariaAtomic"
| "ariaAutoComplete"
| "ariaBrailleLabel"
| "ariaBrailleRoleDescription"
| "ariaBusy"
| "ariaChecked"
| "ariaColCount"
| "ariaColIndex"
| "ariaColIndexText"
| "ariaColSpan"
| "ariaControlsElements"
| "ariaCurrent"
| "ariaDescribedByElements"
| "ariaDescription"
| "ariaDetailsElements"
| "ariaDisabled"
| "ariaErrorMessageElements"
| "ariaExpanded"
| "ariaFlowToElements"
| "ariaHasPopup"
| "ariaHidden"
| "ariaInvalid"
| "ariaKeyShortcuts"
| "ariaLabel"
| "ariaLabelledByElements"
| "ariaLevel"
| "ariaLive"
| "ariaModal"
| "ariaMultiLine"
| "ariaMultiSelectable"
| "ariaOrientation"
| "ariaOwnsElements"
| "ariaPlaceholder"
| "ariaPosInSet"
| "ariaPressed"
| "ariaReadOnly"
| "ariaRelevant"
| "ariaRequired"
| "ariaRoleDescription"
| "ariaRowCount"
| "ariaRowIndex"
| "ariaRowIndexText"
| "ariaRowSpan"
| "ariaSelected"
| "ariaSetSize"
| "ariaSort"
| "ariaValueMax"
| "ariaValueMin"
| "ariaValueNow"
| "ariaValueText"
| "role"
| "nextElementSibling"
| "previousElementSibling"
| "childElementCount"
| "children"
| "firstElementChild"
| "lastElementChild"
| "assignedSlot"
| "attributeStyleMap"
| "style"
| "contentEditable"
| "enterKeyHint"
| "inputMode"
| "isContentEditable"
| "autofocus"
| "dataset"
| "nonce"
| "tabIndex",
>,
>,
>,
"children",
> & {}
renderer
renderer: DOMRenderer
root
root: ParentNode
update
Optionalupdated
updatedCallback?: () => any
Called at DOM tree updated
+Function animated
- animated<T extends HTMLElement | SVGElement>(
root: T,
targetSelector: string,
): Promise<AnimationEvent>Type Parameters
- T extends HTMLElement | SVGElement
Parameters
- root: T
- targetSelector: string
Returns Promise<AnimationEvent>
Function attribute
- attribute<C extends HTMLElement, V>(
_: ClassAccessorDecoratorTarget<C, V>,
__namedParameters: ClassAccessorDecoratorContext<C>,
): void
+accessordecorator of MobX@observablefor HTML attributesType Parameters
- C extends HTMLElement
- V
Returns void
Function component
- component(
meta: ComponentMeta,
): <T extends CustomElementConstructor>(
Class: T,
__namedParameters: ClassDecoratorContext<CustomElementConstructor>,
) => T
+classdecorator of Web componentsParameters
- meta: ComponentMeta
Returns <T extends CustomElementConstructor>(
Class: T,
__namedParameters: ClassDecoratorContext<CustomElementConstructor>,
) => T
diff --git a/functions/getMobxData.html b/functions/getMobxData.html
new file mode 100644
index 0000000..3cafe9b
--- /dev/null
+++ b/functions/getMobxData.html
@@ -0,0 +1 @@
+
diff --git a/functions/lazy.html b/functions/lazy.html
new file mode 100644
index 0000000..a7bebc5
--- /dev/null
+++ b/functions/lazy.html
@@ -0,0 +1 @@
+
Function lazy
- lazy<
T extends
() => Promise<
{ default: CustomElementConstructor
| FunctionComponent },
>,
>(
loader: T,
): (props: GetAsyncProps<T>) => VNodeType Parameters
- T extends () => Promise<{ default: CustomElementConstructor | FunctionComponent }>
Parameters
- loader: T
Returns (props: GetAsyncProps<T>) => VNode
Function observer
+classdecorator of Web components for MobXType Parameters
- T extends ObservableComponent
Parameters
- func: T
- _: ClassDecoratorContext
Returns AwaitedComponent<T>
+classdecorator of Web components for MobXType Parameters
- T extends ObservableComponent
Parameters
- func: T
Returns AwaitedComponent<T>
Function on
- on<T extends HTMLElement>(
type: keyof HTMLElementEventMap,
selector: string,
): (
method: DelegateEventHandler,
__namedParameters: ClassMethodDecoratorContext<T>,
) => voidMethod decorator of DOM Event delegation
+Type Parameters
- T extends HTMLElement
Parameters
- type: keyof HTMLElementEventMap
- selector: string
Returns (
method: DelegateEventHandler,
__namedParameters: ClassMethodDecoratorContext<T>,
) => void
Function reaction
- reaction<C extends HTMLElement, V>(
expression: ReactionExpression<C, V>,
): (
effect: ReactionEffect<V>,
__namedParameters: ClassMethodDecoratorContext<C>,
) => voidMethod decorator of MobX
+reaction()Type Parameters
- C extends HTMLElement
- V
Parameters
- expression: ReactionExpression<C, V>
Returns (
effect: ReactionEffect<V>,
__namedParameters: ClassMethodDecoratorContext<C>,
) => voidExample
+ +import { observable } from 'mobx';
import { component, observer, reaction } from 'web-cell';
@component({ tagName: 'my-tag' })
@observer
export class MyTag extends HTMLElement {
@observable
accessor count = 0;
@reaction(({ count }) => count)
handleCountChange(newValue: number, oldValue: number) {
console.log(`Count changed from ${oldValue} to ${newValue}`);
}
render() {
return (
<button onClick={() => this.count++}>
Up count {this.count}
</button>
);
}
} +
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..6375253
--- /dev/null
+++ b/index.html
@@ -0,0 +1,239 @@
+
WebCell
WebCell
简体中文 | English
+Web Components engine based on VDOM, JSX, MobX & TypeScript
+
+
+
Feature
Engines comparison
| feature | +WebCell 3 | +WebCell 2 | +React | +Vue | +
|---|---|---|---|---|
| JS language | +TypeScript 5 | +TypeScript 4 | +ECMAScript or TypeScript | +ECMAScript or TypeScript | +
| JS syntax | +ES decorator stage-3 | +ES decorator stage-2 | ++ | + |
| XML syntax | +JSX import | +JSX factory | +JSX factory/import | +HTML/Vue template or JSX (optional) | +
| DOM API | +Web components | +Web components | +HTML 5+ | +HTML 5+ | +
| view renderer | +DOM Renderer 2 | +SnabbDOM | +(built-in) | +SnabbDOM (forked) | +
| state API | +MobX @observable |
+this.state |
+this.state or useState() |
+this.$data or ref() |
+
| props API | +MobX @observable |
+@watch |
+this.props or props => {} |
+this.$props or defineProps() |
+
| state manager | +MobX 6+ | +MobX 4/5 | +Redux | +VueX | +
| page router | +JSX tags | +JSX tags + JSON data | +JSX tags | +JSON data | +
| asset bundler | +Parcel 2 | +Parcel 1 | +webpack | +Vite | +
Installation
npm install dom-renderer mobx web-cell
+Web browser usage
+Project bootstrap
Tool chain
npm install parcel @parcel/config-default @parcel/transformer-typescript-tsc -D
+package.json
{
"scripts": {
"start": "parcel source/index.html --open",
"build": "parcel build source/index.html --public-url ."
}
}
+tsconfig.json
{
"compilerOptions": {
"target": "ES6",
"module": "ES2020",
"moduleResolution": "Node",
"useDefineForClassFields": true,
"jsx": "react-jsx",
"jsxImportSource": "dom-renderer"
}
}
+.parcelrc
{
"extends": "@parcel/config-default",
"transformers": {
"*.{ts,tsx}": ["@parcel/transformer-typescript-tsc"]
}
}
+source/index.html
<script src="https://polyfill.web-cell.dev/feature/ECMAScript.js"></script>
<script src="https://polyfill.web-cell.dev/feature/WebComponents.js"></script>
<script src="https://polyfill.web-cell.dev/feature/ElementInternals.js"></script>
<script src="source/MyTag.tsx"></script>
<my-tag></my-tag>
+Function component
import { DOMRenderer } from 'dom-renderer';
import { FC, PropsWithChildren } from 'web-cell';
const Hello: FC<PropsWithChildren> = ({ children = 'World' }) => <h1>Hello, {children}!</h1>;
new DOMRenderer().render(<Hello>WebCell</Hello>);
+Class component
Children slot
import { DOMRenderer } from 'dom-renderer';
import { component } from 'web-cell';
@component({
tagName: 'hello-world',
mode: 'open'
})
class Hello extends HTMLElement {
render() {
return (
<h1>
Hello, <slot />!
</h1>
);
}
}
new DOMRenderer().render(
<>
<Hello>WebCell</Hello>
{/* or */}
<hello-world>WebCell</hello-world>
</>
);
+DOM Props
import { DOMRenderer } from 'dom-renderer';
import { observable } from 'mobx';
import { WebCell, component, attribute, observer } from 'web-cell';
interface HelloProps {
name?: string;
}
interface Hello extends WebCell<HelloProps> {}
@component({ tagName: 'hello-world' })
@observer
class Hello extends HTMLElement implements WebCell<HelloProps> {
@attribute
@observable
accessor name = '';
render() {
return <h1>Hello, {this.name}!</h1>;
}
}
new DOMRenderer().render(<Hello name="WebCell" />);
// or for HTML tag props in TypeScript
declare global {
namespace JSX {
interface IntrinsicElements {
'hello-world': HelloProps;
}
}
}
new DOMRenderer().render(<hello-world name="WebCell" />);
+Inner state
Function component
import { DOMRenderer } from 'dom-renderer';
import { observable } from 'mobx';
import { FC, observer } from 'web-cell';
class CounterModel {
@observable
accessor times = 0;
}
const couterStore = new CounterModel();
const Counter: FC = observer(() => (
<button onClick={() => (couterStore.times += 1)}>Counts: {couterStore.times}</button>
));
new DOMRenderer().render(<Counter />);
+Class component
import { DOMRenderer } from 'dom-renderer';
import { observable } from 'mobx';
import { component, observer } from 'web-cell';
@component({ tagName: 'my-counter' })
@observer
class Counter extends HTMLElement {
@observable
accessor times = 0;
handleClick = () => (this.times += 1);
render() {
return <button onClick={this.handleClick}>Counts: {this.times}</button>;
}
}
new DOMRenderer().render(<Counter />);
+CSS scope
Inline style
import { component } from 'web-cell';
import { stringifyCSS } from 'web-utility';
@component({
tagName: 'my-button',
mode: 'open'
})
export class MyButton extends HTMLElement {
style = stringifyCSS({
'.btn': {
color: 'white',
background: 'lightblue'
}
});
render() {
return (
<>
<style>{this.style}</style>
<a className="btn">
<slot />
</a>
</>
);
}
}
+Link stylesheet
import { component } from 'web-cell';
@component({
tagName: 'my-button',
mode: 'open'
})
export class MyButton extends HTMLElement {
render() {
return (
<>
<link
rel="stylesheet"
href="https://unpkg.com/bootstrap@5.3.6/dist/css/bootstrap.min.css"
/>
<a className="btn">
<slot />
</a>
</>
);
}
}
+CSS module
scoped.css
.btn {
color: white;
background: lightblue;
}
+MyButton.tsx
import { WebCell, component } from 'web-cell';
import styles from './scoped.css' assert { type: 'css' };
interface MyButton extends WebCell {}
@component({
tagName: 'my-button',
mode: 'open'
})
export class MyButton extends HTMLElement implements WebCell {
connectedCallback() {
this.root.adoptedStyleSheets = [styles];
}
render() {
return (
<a className="btn">
<slot />
</a>
);
}
}
+Event delegation
import { component, on } from 'web-cell';
@component({ tagName: 'my-table' })
export class MyTable extends HTMLElement {
@on('click', ':host td > button')
handleEdit(event: MouseEvent, { dataset: { id } }: HTMLButtonElement) {
console.log(`editing row: ${id}`);
}
render() {
return (
<table>
<tr>
<td>1</td>
<td>A</td>
<td>
<button data-id="1">edit</button>
</td>
</tr>
<tr>
<td>2</td>
<td>B</td>
<td>
<button data-id="2">edit</button>
</td>
</tr>
<tr>
<td>3</td>
<td>C</td>
<td>
<button data-id="3">edit</button>
</td>
</tr>
</table>
);
}
}
+MobX reaction
import { observable } from 'mobx';
import { component, observer, reaction } from 'web-cell';
@component({ tagName: 'my-counter' })
@observer
export class Counter extends HTMLElement {
@observable
accessor times = 0;
handleClick = () => (this.times += 1);
@reaction(({ times }) => times)
echoTimes(newValue: number, oldValue: number) {
console.log(`newValue: ${newValue}, oldValue: ${oldValue}`);
}
render() {
return <button onClick={this.handleClick}>Counts: {this.times}</button>;
}
}
+Form association
import { DOMRenderer } from 'dom-renderer';
import { WebField, component, formField, observer } from 'web-cell';
interface MyField extends WebField {}
@component({
tagName: 'my-field',
mode: 'open'
})
@formField
@observer
class MyField extends HTMLElement implements WebField {
render() {
const { name } = this;
return (
<input name={name} onChange={({ currentTarget: { value } }) => (this.value = value)} />
);
}
}
new DOMRenderer().render(
<form method="POST" action="/api/data">
<MyField name="test" />
<button>submit</button>
</form>
);
+Async component
import { DOMRenderer } from 'dom-renderer';
import { observer, PropsWithChildren } from 'web-cell';
import { sleep } from 'web-utility';
const AsyncComponent = observer(async ({ children }: PropsWithChildren) => {
await sleep(1);
return <p>Async Component in {children}</p>;
});
new DOMRenderer().render(<AsyncComponent>WebCell</AsyncComponent>);
+Async loading
AsyncTag.tsx
import { FC } from 'web-cell';
const AsyncTag: FC = () => <div>Async</div>;
export default AsyncTag;
+index.tsx
import { DOMRenderer } from 'dom-renderer';
import { lazy } from 'web-cell';
const AsyncTag = lazy(() => import('./AsyncTag'));
new DOMRenderer().render(<AsyncTag />);
+Async rendering (experimental)
DOM tree
import { DOMRenderer } from 'dom-renderer';
new DOMRenderer().render(
<a>
<b>Async rendering</b>
</a>,
document.body,
'async'
);
+Class component
import { component } from 'web-cell';
@component({
tagName: 'async-renderer',
renderMode: 'async'
})
export class AsyncRenderer extends HTMLElement {
render() {
return (
<a>
<b>Async rendering</b>
</a>
);
}
}
+Animate CSS component
import { DOMRenderer } from 'dom-renderer';
import { AnimateCSS } from 'web-cell';
new DOMRenderer().render(
<AnimateCSS type="fadeIn" component={props => <h1 {...props}>Fade In</h1>} />
);
+Node.js usage
Tool chain
npm install jsdom
+Polyfill
import 'web-cell/polyfill';
+Server Side Rendering
https://github.com/EasyWebApp/DOM-Renderer?tab=readme-ov-file#nodejs--bun
+Basic knowledge
-
+
- Web components +
- Custom elements +
- Shadow DOM +
- Element Internals +
- CSS variables +
- View transitions +
- ECMAScript 6+ +
- TypeScript 5+ +
Life Cycle hooks
-
+
connectedCallback
+disconnectedCallback
+attributeChangedCallback
+adoptedCallback
+updatedCallback
+mountedCallback
+formAssociatedCallback
+formDisabledCallback
+formResetCallback
+formStateRestoreCallback
+
Scaffolds
-
+
- Basic +
- DashBoard +
- Mobile +
- Static site +
Ecosystem
We recommend these libraries to use with WebCell:
+-
+
-
+
State management: MobX (also powered by TypeScript & Decorator)
+
+ -
+
Router: Cell Router
+
+ -
+
UI components
+-
+
- BootCell (based on BootStrap v5) +
- MDUI (based on Material Design v3) +
- GitHub Web Widget +
+ -
+
HTTP request: KoAJAX (based on Koa-like middlewares)
+
+ -
+
Utility: Web utility methods & types
+
+ -
+
Event stream: Iterable Observer (
+Observableproposal)
+ -
+
MarkDown integration: Parcel MDX transformer (MDX Compiler plugin)
+
+
Roadmap
-
+
- [x] Server-side Render +
- [x] Async Component loading +
v2 to v3 migration
More guides
+Interface ComponentMeta
Hierarchy
- ElementDefinitionOptions
- Partial<ShadowRootInit>
- ComponentMeta
Index
Properties
Interface FunctionCellProps
interface FunctionCellProps {
component: FC | AFC;
onAbort?: (event: UIEvent) => any;
onAnimationCancel?: (event: AnimationEvent) => any;
onAnimationEnd?: (event: AnimationEvent) => any;
onAnimationIteration?: (event: AnimationEvent) => any;
onAnimationStart?: (event: AnimationEvent) => any;
onAuxClick?: (event: PointerEvent) => any;
onBeforeInput?: (event: InputEvent) => any;
onBeforematch?: (event: Event) => any;
onBeforeToggle?: (event: ToggleEvent) => any;
onBlur?: (event: FocusEvent) => any;
onCancel?: (event: Event) => any;
onCanPlay?: (event: Event) => any;
onCanplaythrough?: (event: Event) => any;
onChange?: (event: Event) => any;
onClick?: (event: PointerEvent) => any;
onClose?: (event: Event) => any;
onContextlost?: (event: Event) => any;
onContextmenu?: (event: PointerEvent) => any;
onContextrestored?: (event: Event) => any;
onCopy?: (event: ClipboardEvent) => any;
onCueChange?: (event: Event) => any;
onCut?: (event: ClipboardEvent) => any;
onDblClick?: (event: MouseEvent) => any;
onDrag?: (event: DragEvent) => any;
onDragEnd?: (event: DragEvent) => any;
onDragEnter?: (event: DragEvent) => any;
onDragLeave?: (event: DragEvent) => any;
onDragOver?: (event: DragEvent) => any;
onDragStart?: (event: DragEvent) => any;
onDrop?: (event: DragEvent) => any;
onDurationChange?: (event: Event) => any;
onEmptied?: (event: Event) => any;
onEnded?: (event: Event) => any;
onError?: (event: ErrorEvent) => any;
onFocus?: (event: FocusEvent) => any;
onFormdata?: (event: FormDataEvent) => any;
onFullscreenChange?: (event: Event) => any;
onFullscreenError?: (event: Event) => any;
onGotpointercapture?: (event: PointerEvent) => any;
onInput?: (event: Event) => any;
onInvalid?: (event: Event) => any;
onKeydown?: (event: KeyboardEvent) => any;
onKeypress?: (event: KeyboardEvent) => any;
onKeyup?: (event: KeyboardEvent) => any;
onLoad?: (event: Event) => any;
onLoadeddata?: (event: Event) => any;
onLoadedmetadata?: (event: Event) => any;
onLoadstart?: (event: Event) => any;
onLostpointercapture?: (event: PointerEvent) => any;
onMouseDown?: (event: MouseEvent) => any;
onMouseEnter?: (event: MouseEvent) => any;
onMouseLeave?: (event: MouseEvent) => any;
onMouseMove?: (event: MouseEvent) => any;
onMouseOut?: (event: MouseEvent) => any;
onMouseOver?: (event: MouseEvent) => any;
onMouseUp?: (event: MouseEvent) => any;
onPaste?: (event: ClipboardEvent) => any;
onPause?: (event: Event) => any;
onPlay?: (event: Event) => any;
onPlaying?: (event: Event) => any;
onPointerCancel?: (event: PointerEvent) => any;
onPointerDown?: (event: PointerEvent) => any;
onPointerEnter?: (event: PointerEvent) => any;
onPointerLeave?: (event: PointerEvent) => any;
onPointerMove?: (event: PointerEvent) => any;
onPointerOut?: (event: PointerEvent) => any;
onPointerOver?: (event: PointerEvent) => any;
onPointerRawupdate?: (event: Event) => any;
onPointerUp?: (event: PointerEvent) => any;
onProgress?: (event: ProgressEvent<EventTarget>) => any;
onRateChange?: (event: Event) => any;
onReset?: (event: Event) => any;
onResize?: (event: UIEvent) => any;
onScroll?: (event: Event) => any;
onScrollend?: (event: Event) => any;
onSecuritypolicyviolation?: (event: SecurityPolicyViolationEvent) => any;
onSeeked?: (event: Event) => any;
onSeeking?: (event: Event) => any;
onSelect?: (event: Event) => any;
onSelectionChange?: (event: Event) => any;
onSelectstart?: (event: Event) => any;
onSlotChange?: (event: Event) => any;
onStalled?: (event: Event) => any;
onSubmit?: (event: SubmitEvent) => any;
onSuspend?: (event: Event) => any;
onTimeupdate?: (event: Event) => any;
onToggle?: (event: ToggleEvent) => any;
onTouchCancel?: (event: TouchEvent) => any;
onTouchEnd?: (event: TouchEvent) => any;
onTouchMove?: (event: TouchEvent) => any;
onTouchStart?: (event: TouchEvent) => any;
onTransitionCancel?: (event: TransitionEvent) => any;
onTransitionEnd?: (event: TransitionEvent) => any;
onTransitionRun?: (event: TransitionEvent) => any;
onTransitionStart?: (event: TransitionEvent) => any;
onVolumeChange?: (event: Event) => any;
onWaiting?: (event: Event) => any;
onWebkitanimationend?: (event: Event) => any;
onWebkitanimationiteration?: (event: Event) => any;
onWebkitanimationstart?: (event: Event) => any;
onWebkittransitionend?: (event: Event) => any;
onWheel?: (event: WheelEvent) => any;
[key: string]: any;
}
component: FC | AFC;
onAbort?: (event: UIEvent) => any;
onAnimationCancel?: (event: AnimationEvent) => any;
onAnimationEnd?: (event: AnimationEvent) => any;
onAnimationIteration?: (event: AnimationEvent) => any;
onAnimationStart?: (event: AnimationEvent) => any;
onAuxClick?: (event: PointerEvent) => any;
onBeforeInput?: (event: InputEvent) => any;
onBeforematch?: (event: Event) => any;
onBeforeToggle?: (event: ToggleEvent) => any;
onBlur?: (event: FocusEvent) => any;
onCancel?: (event: Event) => any;
onCanPlay?: (event: Event) => any;
onCanplaythrough?: (event: Event) => any;
onChange?: (event: Event) => any;
onClick?: (event: PointerEvent) => any;
onClose?: (event: Event) => any;
onContextlost?: (event: Event) => any;
onContextmenu?: (event: PointerEvent) => any;
onContextrestored?: (event: Event) => any;
onCopy?: (event: ClipboardEvent) => any;
onCueChange?: (event: Event) => any;
onCut?: (event: ClipboardEvent) => any;
onDblClick?: (event: MouseEvent) => any;
onDrag?: (event: DragEvent) => any;
onDragEnd?: (event: DragEvent) => any;
onDragEnter?: (event: DragEvent) => any;
onDragLeave?: (event: DragEvent) => any;
onDragOver?: (event: DragEvent) => any;
onDragStart?: (event: DragEvent) => any;
onDrop?: (event: DragEvent) => any;
onDurationChange?: (event: Event) => any;
onEmptied?: (event: Event) => any;
onEnded?: (event: Event) => any;
onError?: (event: ErrorEvent) => any;
onFocus?: (event: FocusEvent) => any;
onFormdata?: (event: FormDataEvent) => any;
onFullscreenChange?: (event: Event) => any;
onFullscreenError?: (event: Event) => any;
onGotpointercapture?: (event: PointerEvent) => any;
onInput?: (event: Event) => any;
onInvalid?: (event: Event) => any;
onKeydown?: (event: KeyboardEvent) => any;
onKeypress?: (event: KeyboardEvent) => any;
onKeyup?: (event: KeyboardEvent) => any;
onLoad?: (event: Event) => any;
onLoadeddata?: (event: Event) => any;
onLoadedmetadata?: (event: Event) => any;
onLoadstart?: (event: Event) => any;
onLostpointercapture?: (event: PointerEvent) => any;
onMouseDown?: (event: MouseEvent) => any;
onMouseEnter?: (event: MouseEvent) => any;
onMouseLeave?: (event: MouseEvent) => any;
onMouseMove?: (event: MouseEvent) => any;
onMouseOut?: (event: MouseEvent) => any;
onMouseOver?: (event: MouseEvent) => any;
onMouseUp?: (event: MouseEvent) => any;
onPaste?: (event: ClipboardEvent) => any;
onPause?: (event: Event) => any;
onPlay?: (event: Event) => any;
onPlaying?: (event: Event) => any;
onPointerCancel?: (event: PointerEvent) => any;
onPointerDown?: (event: PointerEvent) => any;
onPointerEnter?: (event: PointerEvent) => any;
onPointerLeave?: (event: PointerEvent) => any;
onPointerMove?: (event: PointerEvent) => any;
onPointerOut?: (event: PointerEvent) => any;
onPointerOver?: (event: PointerEvent) => any;
onPointerRawupdate?: (event: Event) => any;
onPointerUp?: (event: PointerEvent) => any;
onProgress?: (event: ProgressEvent<EventTarget>) => any;
onRateChange?: (event: Event) => any;
onReset?: (event: Event) => any;
onResize?: (event: UIEvent) => any;
onScroll?: (event: Event) => any;
onScrollend?: (event: Event) => any;
onSecuritypolicyviolation?: (event: SecurityPolicyViolationEvent) => any;
onSeeked?: (event: Event) => any;
onSeeking?: (event: Event) => any;
onSelect?: (event: Event) => any;
onSelectionChange?: (event: Event) => any;
onSelectstart?: (event: Event) => any;
onSlotChange?: (event: Event) => any;
onStalled?: (event: Event) => any;
onSubmit?: (event: SubmitEvent) => any;
onSuspend?: (event: Event) => any;
onTimeupdate?: (event: Event) => any;
onToggle?: (event: ToggleEvent) => any;
onTouchCancel?: (event: TouchEvent) => any;
onTouchEnd?: (event: TouchEvent) => any;
onTouchMove?: (event: TouchEvent) => any;
onTouchStart?: (event: TouchEvent) => any;
onTransitionCancel?: (event: TransitionEvent) => any;
onTransitionEnd?: (event: TransitionEvent) => any;
onTransitionRun?: (event: TransitionEvent) => any;
onTransitionStart?: (event: TransitionEvent) => any;
onVolumeChange?: (event: Event) => any;
onWaiting?: (event: Event) => any;
onWebkitanimationend?: (event: Event) => any;
onWebkitanimationiteration?: (event: Event) => any;
onWebkitanimationstart?: (event: Event) => any;
onWebkittransitionend?: (event: Event) => any;
onWheel?: (event: WheelEvent) => any;
[key: string]: any;
}
Hierarchy (View Summary)
- WebCellProps
- FunctionCellProps
Indexable
- [key: string]: any
Index
Properties
component
+on
Properties
component
Optionalon
Optionalon
Optionalon
Optionalon
Optionalon
Optionalon
Optionalon
Optionalon
Optionalon
Optionalon
Optionalon
Optionalon
Optionalon
Optionalon
Optionalon
Optionalon
Optionalon
Optionalon
Optionalon
Optionalon
Optionalon
Optionalon
Optionalon
Optionalon
Optionalon
Optionalon
Optionalon
Optionalon
Optionalon
Optionalon
Optionalon
Optionalon
Optionalon
Optionalon
Optionalon
Optionalon
Optionalon
Optionalon
Optionalon
Optionalon
Optionalon
Optionalon
Optionalon
Optionalon
Optionalon
Optionalon
Optionalon
Optionalon
Optionalon
Optionalon
Optionalon
Optionalon
Optionalon
Optionalon
Optionalon
Optionalon
Optionalon
Optionalon
Optionalon
Optionalon
Optionalon
Optionalon
Optionalon
Optionalon
Optionalon
Optionalon
Optionalon
Optionalon
Optionalon
Optionalon
Optionalon
Optionalon
Optionalon
Optionalon
Optionalon
Optionalon
Optionalon
Optionalon
Optionalon
Optionalon
Optionalon
Optionalon
Optionalon
Optionalon
Optionalon
Optionalon
Optionalon
Optionalon
Optionalon
Optionalon
Optionalon
Optionalon
Optionalon
Optionalon
Optionalon
Optionalon
Optionalon
Optionalon
Optionalon
Optionalon
Optionalon
Optionalon
Interface WebCell<P>
interface WebCell<P = {}> {
emit: (event: string, detail?: any, option?: EventInit) => boolean;
internals: ElementInternals;
mounted: boolean;
mountedCallback?: () => any;
props: P & DataObject & Pick<VNode, "key" | "is" | "ref"> & Omit<
Partial<
ARIAMixin & EventHandlers<HTMLElement, HTMLElementEventMap> & DOMProps_Read2Write<
Pick<
HTMLElement,
| "tagName"
| "slot"
| "accessKey"
| "accessKeyLabel"
| "autocapitalize"
| "autocorrect"
| "dir"
| "draggable"
| "hidden"
| "inert"
| "innerText"
| "lang"
| "offsetHeight"
| "offsetLeft"
| "offsetParent"
| "offsetTop"
| "offsetWidth"
| "outerText"
| "popover"
| "spellcheck"
| "title"
| "translate"
| "writingSuggestions"
| "attributes"
| "classList"
| "className"
| "clientHeight"
| "clientLeft"
| "clientTop"
| "clientWidth"
| "currentCSSZoom"
| "id"
| "innerHTML"
| "localName"
| "namespaceURI"
| "outerHTML"
| "part"
| "prefix"
| "scrollHeight"
| "scrollLeft"
| "scrollTop"
| "scrollWidth"
| "shadowRoot"
| "ariaActiveDescendantElement"
| "ariaAtomic"
| "ariaAutoComplete"
| "ariaBrailleLabel"
| "ariaBrailleRoleDescription"
| "ariaBusy"
| "ariaChecked"
| "ariaColCount"
| "ariaColIndex"
| "ariaColIndexText"
| "ariaColSpan"
| "ariaControlsElements"
| "ariaCurrent"
| "ariaDescribedByElements"
| "ariaDescription"
| "ariaDetailsElements"
| "ariaDisabled"
| "ariaErrorMessageElements"
| "ariaExpanded"
| "ariaFlowToElements"
| "ariaHasPopup"
| "ariaHidden"
| "ariaInvalid"
| "ariaKeyShortcuts"
| "ariaLabel"
| "ariaLabelledByElements"
| "ariaLevel"
| "ariaLive"
| "ariaModal"
| "ariaMultiLine"
| "ariaMultiSelectable"
| "ariaOrientation"
| "ariaOwnsElements"
| "ariaPlaceholder"
| "ariaPosInSet"
| "ariaPressed"
| "ariaReadOnly"
| "ariaRelevant"
| "ariaRequired"
| "ariaRoleDescription"
| "ariaRowCount"
| "ariaRowIndex"
| "ariaRowIndexText"
| "ariaRowSpan"
| "ariaSelected"
| "ariaSetSize"
| "ariaSort"
| "ariaValueMax"
| "ariaValueMin"
| "ariaValueNow"
| "ariaValueText"
| "role"
| "nextElementSibling"
| "previousElementSibling"
| "childElementCount"
| "children"
| "firstElementChild"
| "lastElementChild"
| "assignedSlot"
| "attributeStyleMap"
| "style"
| "contentEditable"
| "enterKeyHint"
| "inputMode"
| "isContentEditable"
| "autofocus"
| "dataset"
| "nonce"
| "tabIndex",
>,
>,
>,
"children",
> & {};
renderer: DOMRenderer;
root: ParentNode;
update: () => Promise<void>;
updatedCallback?: () => any;
}
emit: (event: string, detail?: any, option?: EventInit) => boolean;
internals: ElementInternals;
mounted: boolean;
mountedCallback?: () => any;
props: P & DataObject & Pick<VNode, "key" | "is" | "ref"> & Omit<
Partial<
ARIAMixin & EventHandlers<HTMLElement, HTMLElementEventMap> & DOMProps_Read2Write<
Pick<
HTMLElement,
| "tagName"
| "slot"
| "accessKey"
| "accessKeyLabel"
| "autocapitalize"
| "autocorrect"
| "dir"
| "draggable"
| "hidden"
| "inert"
| "innerText"
| "lang"
| "offsetHeight"
| "offsetLeft"
| "offsetParent"
| "offsetTop"
| "offsetWidth"
| "outerText"
| "popover"
| "spellcheck"
| "title"
| "translate"
| "writingSuggestions"
| "attributes"
| "classList"
| "className"
| "clientHeight"
| "clientLeft"
| "clientTop"
| "clientWidth"
| "currentCSSZoom"
| "id"
| "innerHTML"
| "localName"
| "namespaceURI"
| "outerHTML"
| "part"
| "prefix"
| "scrollHeight"
| "scrollLeft"
| "scrollTop"
| "scrollWidth"
| "shadowRoot"
| "ariaActiveDescendantElement"
| "ariaAtomic"
| "ariaAutoComplete"
| "ariaBrailleLabel"
| "ariaBrailleRoleDescription"
| "ariaBusy"
| "ariaChecked"
| "ariaColCount"
| "ariaColIndex"
| "ariaColIndexText"
| "ariaColSpan"
| "ariaControlsElements"
| "ariaCurrent"
| "ariaDescribedByElements"
| "ariaDescription"
| "ariaDetailsElements"
| "ariaDisabled"
| "ariaErrorMessageElements"
| "ariaExpanded"
| "ariaFlowToElements"
| "ariaHasPopup"
| "ariaHidden"
| "ariaInvalid"
| "ariaKeyShortcuts"
| "ariaLabel"
| "ariaLabelledByElements"
| "ariaLevel"
| "ariaLive"
| "ariaModal"
| "ariaMultiLine"
| "ariaMultiSelectable"
| "ariaOrientation"
| "ariaOwnsElements"
| "ariaPlaceholder"
| "ariaPosInSet"
| "ariaPressed"
| "ariaReadOnly"
| "ariaRelevant"
| "ariaRequired"
| "ariaRoleDescription"
| "ariaRowCount"
| "ariaRowIndex"
| "ariaRowIndexText"
| "ariaRowSpan"
| "ariaSelected"
| "ariaSetSize"
| "ariaSort"
| "ariaValueMax"
| "ariaValueMin"
| "ariaValueNow"
| "ariaValueText"
| "role"
| "nextElementSibling"
| "previousElementSibling"
| "childElementCount"
| "children"
| "firstElementChild"
| "lastElementChild"
| "assignedSlot"
| "attributeStyleMap"
| "style"
| "contentEditable"
| "enterKeyHint"
| "inputMode"
| "isContentEditable"
| "autofocus"
| "dataset"
| "nonce"
| "tabIndex",
>,
>,
>,
"children",
> & {};
renderer: DOMRenderer;
root: ParentNode;
update: () => Promise<void>;
updatedCallback?: () => any;
}
Type Parameters
- P = {}
Hierarchy (View Summary)
- CustomElement
Implemented by
Index
Properties
Properties
emit
emit: (event: string, detail?: any, option?: EventInit) => boolean
internals
mounted
mounted: boolean
Optionalmounted
mountedCallback?: () => any
Called at first time of DOM tree updated
+props
props: P & DataObject & Pick<VNode, "key" | "is" | "ref"> & Omit<
Partial<
ARIAMixin & EventHandlers<HTMLElement, HTMLElementEventMap> & DOMProps_Read2Write<
Pick<
HTMLElement,
| "tagName"
| "slot"
| "accessKey"
| "accessKeyLabel"
| "autocapitalize"
| "autocorrect"
| "dir"
| "draggable"
| "hidden"
| "inert"
| "innerText"
| "lang"
| "offsetHeight"
| "offsetLeft"
| "offsetParent"
| "offsetTop"
| "offsetWidth"
| "outerText"
| "popover"
| "spellcheck"
| "title"
| "translate"
| "writingSuggestions"
| "attributes"
| "classList"
| "className"
| "clientHeight"
| "clientLeft"
| "clientTop"
| "clientWidth"
| "currentCSSZoom"
| "id"
| "innerHTML"
| "localName"
| "namespaceURI"
| "outerHTML"
| "part"
| "prefix"
| "scrollHeight"
| "scrollLeft"
| "scrollTop"
| "scrollWidth"
| "shadowRoot"
| "ariaActiveDescendantElement"
| "ariaAtomic"
| "ariaAutoComplete"
| "ariaBrailleLabel"
| "ariaBrailleRoleDescription"
| "ariaBusy"
| "ariaChecked"
| "ariaColCount"
| "ariaColIndex"
| "ariaColIndexText"
| "ariaColSpan"
| "ariaControlsElements"
| "ariaCurrent"
| "ariaDescribedByElements"
| "ariaDescription"
| "ariaDetailsElements"
| "ariaDisabled"
| "ariaErrorMessageElements"
| "ariaExpanded"
| "ariaFlowToElements"
| "ariaHasPopup"
| "ariaHidden"
| "ariaInvalid"
| "ariaKeyShortcuts"
| "ariaLabel"
| "ariaLabelledByElements"
| "ariaLevel"
| "ariaLive"
| "ariaModal"
| "ariaMultiLine"
| "ariaMultiSelectable"
| "ariaOrientation"
| "ariaOwnsElements"
| "ariaPlaceholder"
| "ariaPosInSet"
| "ariaPressed"
| "ariaReadOnly"
| "ariaRelevant"
| "ariaRequired"
| "ariaRoleDescription"
| "ariaRowCount"
| "ariaRowIndex"
| "ariaRowIndexText"
| "ariaRowSpan"
| "ariaSelected"
| "ariaSetSize"
| "ariaSort"
| "ariaValueMax"
| "ariaValueMin"
| "ariaValueNow"
| "ariaValueText"
| "role"
| "nextElementSibling"
| "previousElementSibling"
| "childElementCount"
| "children"
| "firstElementChild"
| "lastElementChild"
| "assignedSlot"
| "attributeStyleMap"
| "style"
| "contentEditable"
| "enterKeyHint"
| "inputMode"
| "isContentEditable"
| "autofocus"
| "dataset"
| "nonce"
| "tabIndex",
>,
>,
>,
"children",
> & {}
Partial<
ARIAMixin & EventHandlers<HTMLElement, HTMLElementEventMap> & DOMProps_Read2Write<
Pick<
HTMLElement,
| "tagName"
| "slot"
| "accessKey"
| "accessKeyLabel"
| "autocapitalize"
| "autocorrect"
| "dir"
| "draggable"
| "hidden"
| "inert"
| "innerText"
| "lang"
| "offsetHeight"
| "offsetLeft"
| "offsetParent"
| "offsetTop"
| "offsetWidth"
| "outerText"
| "popover"
| "spellcheck"
| "title"
| "translate"
| "writingSuggestions"
| "attributes"
| "classList"
| "className"
| "clientHeight"
| "clientLeft"
| "clientTop"
| "clientWidth"
| "currentCSSZoom"
| "id"
| "innerHTML"
| "localName"
| "namespaceURI"
| "outerHTML"
| "part"
| "prefix"
| "scrollHeight"
| "scrollLeft"
| "scrollTop"
| "scrollWidth"
| "shadowRoot"
| "ariaActiveDescendantElement"
| "ariaAtomic"
| "ariaAutoComplete"
| "ariaBrailleLabel"
| "ariaBrailleRoleDescription"
| "ariaBusy"
| "ariaChecked"
| "ariaColCount"
| "ariaColIndex"
| "ariaColIndexText"
| "ariaColSpan"
| "ariaControlsElements"
| "ariaCurrent"
| "ariaDescribedByElements"
| "ariaDescription"
| "ariaDetailsElements"
| "ariaDisabled"
| "ariaErrorMessageElements"
| "ariaExpanded"
| "ariaFlowToElements"
| "ariaHasPopup"
| "ariaHidden"
| "ariaInvalid"
| "ariaKeyShortcuts"
| "ariaLabel"
| "ariaLabelledByElements"
| "ariaLevel"
| "ariaLive"
| "ariaModal"
| "ariaMultiLine"
| "ariaMultiSelectable"
| "ariaOrientation"
| "ariaOwnsElements"
| "ariaPlaceholder"
| "ariaPosInSet"
| "ariaPressed"
| "ariaReadOnly"
| "ariaRelevant"
| "ariaRequired"
| "ariaRoleDescription"
| "ariaRowCount"
| "ariaRowIndex"
| "ariaRowIndexText"
| "ariaRowSpan"
| "ariaSelected"
| "ariaSetSize"
| "ariaSort"
| "ariaValueMax"
| "ariaValueMin"
| "ariaValueNow"
| "ariaValueText"
| "role"
| "nextElementSibling"
| "previousElementSibling"
| "childElementCount"
| "children"
| "firstElementChild"
| "lastElementChild"
| "assignedSlot"
| "attributeStyleMap"
| "style"
| "contentEditable"
| "enterKeyHint"
| "inputMode"
| "isContentEditable"
| "autofocus"
| "dataset"
| "nonce"
| "tabIndex",
>,
>,
>,
"children",
> & {}
renderer
renderer: DOMRenderer
root
root: ParentNode
update
Optionalupdated
updatedCallback?: () => any
Called at DOM tree updated
+Interface WebField<P>
interface WebField<P = {}> {
emit: (event: string, detail?: any, option?: EventInit) => boolean;
internals: ElementInternals;
mounted: boolean;
mountedCallback?: () => any;
props: P & Partial<
ARIAMixin & EventHandlers<HTMLInputElement, HTMLElementEventMap> & DOMProps_Read2Write<
Pick<
HTMLInputElement,
| "tagName"
| "slot"
| "accessKey"
| "accessKeyLabel"
| "autocapitalize"
| "autocorrect"
| "dir"
| "draggable"
| "hidden"
| "inert"
| "innerText"
| "lang"
| "offsetHeight"
| "offsetLeft"
| "offsetParent"
| "offsetTop"
| "offsetWidth"
| "outerText"
| "popover"
| "spellcheck"
| "title"
| "translate"
| "writingSuggestions"
| "attributes"
| "classList"
| "className"
| "clientHeight"
| "clientLeft"
| "clientTop"
| "clientWidth"
| "currentCSSZoom"
| "id"
| "innerHTML"
| "localName"
| "namespaceURI"
| "outerHTML"
| "part"
| "prefix"
| "scrollHeight"
| "scrollLeft"
| "scrollTop"
| "scrollWidth"
| "shadowRoot"
| "ariaActiveDescendantElement"
| "ariaAtomic"
| "ariaAutoComplete"
| "ariaBrailleLabel"
| "ariaBrailleRoleDescription"
| "ariaBusy"
| "ariaChecked"
| "ariaColCount"
| "ariaColIndex"
| "ariaColIndexText"
| "ariaColSpan"
| "ariaControlsElements"
| "ariaCurrent"
| "ariaDescribedByElements"
| "ariaDescription"
| "ariaDetailsElements"
| "ariaDisabled"
| "ariaErrorMessageElements"
| "ariaExpanded"
| "ariaFlowToElements"
| "ariaHasPopup"
| "ariaHidden"
| "ariaInvalid"
| "ariaKeyShortcuts"
| "ariaLabel"
| "ariaLabelledByElements"
| "ariaLevel"
| "ariaLive"
| "ariaModal"
| "ariaMultiLine"
| "ariaMultiSelectable"
| "ariaOrientation"
| "ariaOwnsElements"
| "ariaPlaceholder"
| "ariaPosInSet"
| "ariaPressed"
| "ariaReadOnly"
| "ariaRelevant"
| "ariaRequired"
| "ariaRoleDescription"
| "ariaRowCount"
| "ariaRowIndex"
| "ariaRowIndexText"
| "ariaRowSpan"
| "ariaSelected"
| "ariaSetSize"
| "ariaSort"
| "ariaValueMax"
| "ariaValueMin"
| "ariaValueNow"
| "ariaValueText"
| "role"
| "nextElementSibling"
| "previousElementSibling"
| "childElementCount"
| "children"
| "firstElementChild"
| "lastElementChild"
| "assignedSlot"
| "attributeStyleMap"
| "style"
| "contentEditable"
| "enterKeyHint"
| "inputMode"
| "isContentEditable"
| "autofocus"
| "dataset"
| "nonce"
| "tabIndex"
| "type"
| "form"
| "pattern"
| "name"
| "align"
| "height"
| "useMap"
| "validationMessage"
| "validity"
| "width"
| "willValidate"
| "accept"
| "alt"
| "autocomplete"
| "capture"
| "checked"
| "defaultChecked"
| "defaultValue"
| "dirName"
| "disabled"
| "files"
| "formAction"
| "formEnctype"
| "formMethod"
| "formNoValidate"
| "formTarget"
| "indeterminate"
| "labels"
| "list"
| "max"
| "maxLength"
| "min"
| "minLength"
| "multiple"
| "placeholder"
| "readOnly"
| "required"
| "selectionDirection"
| "selectionEnd"
| "selectionStart"
| "size"
| "src"
| "step"
| "value"
| "valueAsDate"
| "valueAsNumber"
| "webkitEntries"
| "webkitdirectory"
| "popoverTargetAction"
| "popoverTargetElement",
>,
>,
> & Partial<
Pick<
HTMLInputElement,
"name"
| "defaultValue"
| "disabled"
| "required"
| "value",
>,
> & DataObject & Pick<VNode, "key" | "is" | "ref"> & Omit<
Partial<
ARIAMixin & EventHandlers<HTMLElement, HTMLElementEventMap> & DOMProps_Read2Write<
Pick<
HTMLElement,
| "tagName"
| "slot"
| "accessKey"
| "accessKeyLabel"
| "autocapitalize"
| "autocorrect"
| "dir"
| "draggable"
| "hidden"
| "inert"
| "innerText"
| "lang"
| "offsetHeight"
| "offsetLeft"
| "offsetParent"
| "offsetTop"
| "offsetWidth"
| "outerText"
| "popover"
| "spellcheck"
| "title"
| "translate"
| "writingSuggestions"
| "attributes"
| "classList"
| "className"
| "clientHeight"
| "clientLeft"
| "clientTop"
| "clientWidth"
| "currentCSSZoom"
| "id"
| "innerHTML"
| "localName"
| "namespaceURI"
| "outerHTML"
| "part"
| "prefix"
| "scrollHeight"
| "scrollLeft"
| "scrollTop"
| "scrollWidth"
| "shadowRoot"
| "ariaActiveDescendantElement"
| "ariaAtomic"
| "ariaAutoComplete"
| "ariaBrailleLabel"
| "ariaBrailleRoleDescription"
| "ariaBusy"
| "ariaChecked"
| "ariaColCount"
| "ariaColIndex"
| "ariaColIndexText"
| "ariaColSpan"
| "ariaControlsElements"
| "ariaCurrent"
| "ariaDescribedByElements"
| "ariaDescription"
| "ariaDetailsElements"
| "ariaDisabled"
| "ariaErrorMessageElements"
| "ariaExpanded"
| "ariaFlowToElements"
| "ariaHasPopup"
| "ariaHidden"
| "ariaInvalid"
| "ariaKeyShortcuts"
| "ariaLabel"
| "ariaLabelledByElements"
| "ariaLevel"
| "ariaLive"
| "ariaModal"
| "ariaMultiLine"
| "ariaMultiSelectable"
| "ariaOrientation"
| "ariaOwnsElements"
| "ariaPlaceholder"
| "ariaPosInSet"
| "ariaPressed"
| "ariaReadOnly"
| "ariaRelevant"
| "ariaRequired"
| "ariaRoleDescription"
| "ariaRowCount"
| "ariaRowIndex"
| "ariaRowIndexText"
| "ariaRowSpan"
| "ariaSelected"
| "ariaSetSize"
| "ariaSort"
| "ariaValueMax"
| "ariaValueMin"
| "ariaValueNow"
| "ariaValueText"
| "role"
| "nextElementSibling"
| "previousElementSibling"
| "childElementCount"
| "children"
| "firstElementChild"
| "lastElementChild"
| "assignedSlot"
| "attributeStyleMap"
| "style"
| "contentEditable"
| "enterKeyHint"
| "inputMode"
| "isContentEditable"
| "autofocus"
| "dataset"
| "nonce"
| "tabIndex",
>,
>,
>,
"children",
> & {};
renderer: DOMRenderer;
root: ParentNode;
update: () => Promise<void>;
updatedCallback?: () => any;
}
emit: (event: string, detail?: any, option?: EventInit) => boolean;
internals: ElementInternals;
mounted: boolean;
mountedCallback?: () => any;
props: P & Partial<
ARIAMixin & EventHandlers<HTMLInputElement, HTMLElementEventMap> & DOMProps_Read2Write<
Pick<
HTMLInputElement,
| "tagName"
| "slot"
| "accessKey"
| "accessKeyLabel"
| "autocapitalize"
| "autocorrect"
| "dir"
| "draggable"
| "hidden"
| "inert"
| "innerText"
| "lang"
| "offsetHeight"
| "offsetLeft"
| "offsetParent"
| "offsetTop"
| "offsetWidth"
| "outerText"
| "popover"
| "spellcheck"
| "title"
| "translate"
| "writingSuggestions"
| "attributes"
| "classList"
| "className"
| "clientHeight"
| "clientLeft"
| "clientTop"
| "clientWidth"
| "currentCSSZoom"
| "id"
| "innerHTML"
| "localName"
| "namespaceURI"
| "outerHTML"
| "part"
| "prefix"
| "scrollHeight"
| "scrollLeft"
| "scrollTop"
| "scrollWidth"
| "shadowRoot"
| "ariaActiveDescendantElement"
| "ariaAtomic"
| "ariaAutoComplete"
| "ariaBrailleLabel"
| "ariaBrailleRoleDescription"
| "ariaBusy"
| "ariaChecked"
| "ariaColCount"
| "ariaColIndex"
| "ariaColIndexText"
| "ariaColSpan"
| "ariaControlsElements"
| "ariaCurrent"
| "ariaDescribedByElements"
| "ariaDescription"
| "ariaDetailsElements"
| "ariaDisabled"
| "ariaErrorMessageElements"
| "ariaExpanded"
| "ariaFlowToElements"
| "ariaHasPopup"
| "ariaHidden"
| "ariaInvalid"
| "ariaKeyShortcuts"
| "ariaLabel"
| "ariaLabelledByElements"
| "ariaLevel"
| "ariaLive"
| "ariaModal"
| "ariaMultiLine"
| "ariaMultiSelectable"
| "ariaOrientation"
| "ariaOwnsElements"
| "ariaPlaceholder"
| "ariaPosInSet"
| "ariaPressed"
| "ariaReadOnly"
| "ariaRelevant"
| "ariaRequired"
| "ariaRoleDescription"
| "ariaRowCount"
| "ariaRowIndex"
| "ariaRowIndexText"
| "ariaRowSpan"
| "ariaSelected"
| "ariaSetSize"
| "ariaSort"
| "ariaValueMax"
| "ariaValueMin"
| "ariaValueNow"
| "ariaValueText"
| "role"
| "nextElementSibling"
| "previousElementSibling"
| "childElementCount"
| "children"
| "firstElementChild"
| "lastElementChild"
| "assignedSlot"
| "attributeStyleMap"
| "style"
| "contentEditable"
| "enterKeyHint"
| "inputMode"
| "isContentEditable"
| "autofocus"
| "dataset"
| "nonce"
| "tabIndex"
| "type"
| "form"
| "pattern"
| "name"
| "align"
| "height"
| "useMap"
| "validationMessage"
| "validity"
| "width"
| "willValidate"
| "accept"
| "alt"
| "autocomplete"
| "capture"
| "checked"
| "defaultChecked"
| "defaultValue"
| "dirName"
| "disabled"
| "files"
| "formAction"
| "formEnctype"
| "formMethod"
| "formNoValidate"
| "formTarget"
| "indeterminate"
| "labels"
| "list"
| "max"
| "maxLength"
| "min"
| "minLength"
| "multiple"
| "placeholder"
| "readOnly"
| "required"
| "selectionDirection"
| "selectionEnd"
| "selectionStart"
| "size"
| "src"
| "step"
| "value"
| "valueAsDate"
| "valueAsNumber"
| "webkitEntries"
| "webkitdirectory"
| "popoverTargetAction"
| "popoverTargetElement",
>,
>,
> & Partial<
Pick<
HTMLInputElement,
"name"
| "defaultValue"
| "disabled"
| "required"
| "value",
>,
> & DataObject & Pick<VNode, "key" | "is" | "ref"> & Omit<
Partial<
ARIAMixin & EventHandlers<HTMLElement, HTMLElementEventMap> & DOMProps_Read2Write<
Pick<
HTMLElement,
| "tagName"
| "slot"
| "accessKey"
| "accessKeyLabel"
| "autocapitalize"
| "autocorrect"
| "dir"
| "draggable"
| "hidden"
| "inert"
| "innerText"
| "lang"
| "offsetHeight"
| "offsetLeft"
| "offsetParent"
| "offsetTop"
| "offsetWidth"
| "outerText"
| "popover"
| "spellcheck"
| "title"
| "translate"
| "writingSuggestions"
| "attributes"
| "classList"
| "className"
| "clientHeight"
| "clientLeft"
| "clientTop"
| "clientWidth"
| "currentCSSZoom"
| "id"
| "innerHTML"
| "localName"
| "namespaceURI"
| "outerHTML"
| "part"
| "prefix"
| "scrollHeight"
| "scrollLeft"
| "scrollTop"
| "scrollWidth"
| "shadowRoot"
| "ariaActiveDescendantElement"
| "ariaAtomic"
| "ariaAutoComplete"
| "ariaBrailleLabel"
| "ariaBrailleRoleDescription"
| "ariaBusy"
| "ariaChecked"
| "ariaColCount"
| "ariaColIndex"
| "ariaColIndexText"
| "ariaColSpan"
| "ariaControlsElements"
| "ariaCurrent"
| "ariaDescribedByElements"
| "ariaDescription"
| "ariaDetailsElements"
| "ariaDisabled"
| "ariaErrorMessageElements"
| "ariaExpanded"
| "ariaFlowToElements"
| "ariaHasPopup"
| "ariaHidden"
| "ariaInvalid"
| "ariaKeyShortcuts"
| "ariaLabel"
| "ariaLabelledByElements"
| "ariaLevel"
| "ariaLive"
| "ariaModal"
| "ariaMultiLine"
| "ariaMultiSelectable"
| "ariaOrientation"
| "ariaOwnsElements"
| "ariaPlaceholder"
| "ariaPosInSet"
| "ariaPressed"
| "ariaReadOnly"
| "ariaRelevant"
| "ariaRequired"
| "ariaRoleDescription"
| "ariaRowCount"
| "ariaRowIndex"
| "ariaRowIndexText"
| "ariaRowSpan"
| "ariaSelected"
| "ariaSetSize"
| "ariaSort"
| "ariaValueMax"
| "ariaValueMin"
| "ariaValueNow"
| "ariaValueText"
| "role"
| "nextElementSibling"
| "previousElementSibling"
| "childElementCount"
| "children"
| "firstElementChild"
| "lastElementChild"
| "assignedSlot"
| "attributeStyleMap"
| "style"
| "contentEditable"
| "enterKeyHint"
| "inputMode"
| "isContentEditable"
| "autofocus"
| "dataset"
| "nonce"
| "tabIndex",
>,
>,
>,
"children",
> & {};
renderer: DOMRenderer;
root: ParentNode;
update: () => Promise<void>;
updatedCallback?: () => any;
}
Type Parameters
- P = {}
Hierarchy (View Summary)
Index
Properties
Properties
emit
emit: (event: string, detail?: any, option?: EventInit) => boolean
internals
mounted
mounted: boolean
Optionalmounted
mountedCallback?: () => any
Called at first time of DOM tree updated
+props
props: P & Partial<
ARIAMixin & EventHandlers<HTMLInputElement, HTMLElementEventMap> & DOMProps_Read2Write<
Pick<
HTMLInputElement,
| "tagName"
| "slot"
| "accessKey"
| "accessKeyLabel"
| "autocapitalize"
| "autocorrect"
| "dir"
| "draggable"
| "hidden"
| "inert"
| "innerText"
| "lang"
| "offsetHeight"
| "offsetLeft"
| "offsetParent"
| "offsetTop"
| "offsetWidth"
| "outerText"
| "popover"
| "spellcheck"
| "title"
| "translate"
| "writingSuggestions"
| "attributes"
| "classList"
| "className"
| "clientHeight"
| "clientLeft"
| "clientTop"
| "clientWidth"
| "currentCSSZoom"
| "id"
| "innerHTML"
| "localName"
| "namespaceURI"
| "outerHTML"
| "part"
| "prefix"
| "scrollHeight"
| "scrollLeft"
| "scrollTop"
| "scrollWidth"
| "shadowRoot"
| "ariaActiveDescendantElement"
| "ariaAtomic"
| "ariaAutoComplete"
| "ariaBrailleLabel"
| "ariaBrailleRoleDescription"
| "ariaBusy"
| "ariaChecked"
| "ariaColCount"
| "ariaColIndex"
| "ariaColIndexText"
| "ariaColSpan"
| "ariaControlsElements"
| "ariaCurrent"
| "ariaDescribedByElements"
| "ariaDescription"
| "ariaDetailsElements"
| "ariaDisabled"
| "ariaErrorMessageElements"
| "ariaExpanded"
| "ariaFlowToElements"
| "ariaHasPopup"
| "ariaHidden"
| "ariaInvalid"
| "ariaKeyShortcuts"
| "ariaLabel"
| "ariaLabelledByElements"
| "ariaLevel"
| "ariaLive"
| "ariaModal"
| "ariaMultiLine"
| "ariaMultiSelectable"
| "ariaOrientation"
| "ariaOwnsElements"
| "ariaPlaceholder"
| "ariaPosInSet"
| "ariaPressed"
| "ariaReadOnly"
| "ariaRelevant"
| "ariaRequired"
| "ariaRoleDescription"
| "ariaRowCount"
| "ariaRowIndex"
| "ariaRowIndexText"
| "ariaRowSpan"
| "ariaSelected"
| "ariaSetSize"
| "ariaSort"
| "ariaValueMax"
| "ariaValueMin"
| "ariaValueNow"
| "ariaValueText"
| "role"
| "nextElementSibling"
| "previousElementSibling"
| "childElementCount"
| "children"
| "firstElementChild"
| "lastElementChild"
| "assignedSlot"
| "attributeStyleMap"
| "style"
| "contentEditable"
| "enterKeyHint"
| "inputMode"
| "isContentEditable"
| "autofocus"
| "dataset"
| "nonce"
| "tabIndex"
| "type"
| "form"
| "pattern"
| "name"
| "align"
| "height"
| "useMap"
| "validationMessage"
| "validity"
| "width"
| "willValidate"
| "accept"
| "alt"
| "autocomplete"
| "capture"
| "checked"
| "defaultChecked"
| "defaultValue"
| "dirName"
| "disabled"
| "files"
| "formAction"
| "formEnctype"
| "formMethod"
| "formNoValidate"
| "formTarget"
| "indeterminate"
| "labels"
| "list"
| "max"
| "maxLength"
| "min"
| "minLength"
| "multiple"
| "placeholder"
| "readOnly"
| "required"
| "selectionDirection"
| "selectionEnd"
| "selectionStart"
| "size"
| "src"
| "step"
| "value"
| "valueAsDate"
| "valueAsNumber"
| "webkitEntries"
| "webkitdirectory"
| "popoverTargetAction"
| "popoverTargetElement",
>,
>,
> & Partial<
Pick<
HTMLInputElement,
"name"
| "defaultValue"
| "disabled"
| "required"
| "value",
>,
> & DataObject & Pick<VNode, "key" | "is" | "ref"> & Omit<
Partial<
ARIAMixin & EventHandlers<HTMLElement, HTMLElementEventMap> & DOMProps_Read2Write<
Pick<
HTMLElement,
| "tagName"
| "slot"
| "accessKey"
| "accessKeyLabel"
| "autocapitalize"
| "autocorrect"
| "dir"
| "draggable"
| "hidden"
| "inert"
| "innerText"
| "lang"
| "offsetHeight"
| "offsetLeft"
| "offsetParent"
| "offsetTop"
| "offsetWidth"
| "outerText"
| "popover"
| "spellcheck"
| "title"
| "translate"
| "writingSuggestions"
| "attributes"
| "classList"
| "className"
| "clientHeight"
| "clientLeft"
| "clientTop"
| "clientWidth"
| "currentCSSZoom"
| "id"
| "innerHTML"
| "localName"
| "namespaceURI"
| "outerHTML"
| "part"
| "prefix"
| "scrollHeight"
| "scrollLeft"
| "scrollTop"
| "scrollWidth"
| "shadowRoot"
| "ariaActiveDescendantElement"
| "ariaAtomic"
| "ariaAutoComplete"
| "ariaBrailleLabel"
| "ariaBrailleRoleDescription"
| "ariaBusy"
| "ariaChecked"
| "ariaColCount"
| "ariaColIndex"
| "ariaColIndexText"
| "ariaColSpan"
| "ariaControlsElements"
| "ariaCurrent"
| "ariaDescribedByElements"
| "ariaDescription"
| "ariaDetailsElements"
| "ariaDisabled"
| "ariaErrorMessageElements"
| "ariaExpanded"
| "ariaFlowToElements"
| "ariaHasPopup"
| "ariaHidden"
| "ariaInvalid"
| "ariaKeyShortcuts"
| "ariaLabel"
| "ariaLabelledByElements"
| "ariaLevel"
| "ariaLive"
| "ariaModal"
| "ariaMultiLine"
| "ariaMultiSelectable"
| "ariaOrientation"
| "ariaOwnsElements"
| "ariaPlaceholder"
| "ariaPosInSet"
| "ariaPressed"
| "ariaReadOnly"
| "ariaRelevant"
| "ariaRequired"
| "ariaRoleDescription"
| "ariaRowCount"
| "ariaRowIndex"
| "ariaRowIndexText"
| "ariaRowSpan"
| "ariaSelected"
| "ariaSetSize"
| "ariaSort"
| "ariaValueMax"
| "ariaValueMin"
| "ariaValueNow"
| "ariaValueText"
| "role"
| "nextElementSibling"
| "previousElementSibling"
| "childElementCount"
| "children"
| "firstElementChild"
| "lastElementChild"
| "assignedSlot"
| "attributeStyleMap"
| "style"
| "contentEditable"
| "enterKeyHint"
| "inputMode"
| "isContentEditable"
| "autofocus"
| "dataset"
| "nonce"
| "tabIndex",
>,
>,
>,
"children",
> & {}
ARIAMixin & EventHandlers<HTMLInputElement, HTMLElementEventMap> & DOMProps_Read2Write<
Pick<
HTMLInputElement,
| "tagName"
| "slot"
| "accessKey"
| "accessKeyLabel"
| "autocapitalize"
| "autocorrect"
| "dir"
| "draggable"
| "hidden"
| "inert"
| "innerText"
| "lang"
| "offsetHeight"
| "offsetLeft"
| "offsetParent"
| "offsetTop"
| "offsetWidth"
| "outerText"
| "popover"
| "spellcheck"
| "title"
| "translate"
| "writingSuggestions"
| "attributes"
| "classList"
| "className"
| "clientHeight"
| "clientLeft"
| "clientTop"
| "clientWidth"
| "currentCSSZoom"
| "id"
| "innerHTML"
| "localName"
| "namespaceURI"
| "outerHTML"
| "part"
| "prefix"
| "scrollHeight"
| "scrollLeft"
| "scrollTop"
| "scrollWidth"
| "shadowRoot"
| "ariaActiveDescendantElement"
| "ariaAtomic"
| "ariaAutoComplete"
| "ariaBrailleLabel"
| "ariaBrailleRoleDescription"
| "ariaBusy"
| "ariaChecked"
| "ariaColCount"
| "ariaColIndex"
| "ariaColIndexText"
| "ariaColSpan"
| "ariaControlsElements"
| "ariaCurrent"
| "ariaDescribedByElements"
| "ariaDescription"
| "ariaDetailsElements"
| "ariaDisabled"
| "ariaErrorMessageElements"
| "ariaExpanded"
| "ariaFlowToElements"
| "ariaHasPopup"
| "ariaHidden"
| "ariaInvalid"
| "ariaKeyShortcuts"
| "ariaLabel"
| "ariaLabelledByElements"
| "ariaLevel"
| "ariaLive"
| "ariaModal"
| "ariaMultiLine"
| "ariaMultiSelectable"
| "ariaOrientation"
| "ariaOwnsElements"
| "ariaPlaceholder"
| "ariaPosInSet"
| "ariaPressed"
| "ariaReadOnly"
| "ariaRelevant"
| "ariaRequired"
| "ariaRoleDescription"
| "ariaRowCount"
| "ariaRowIndex"
| "ariaRowIndexText"
| "ariaRowSpan"
| "ariaSelected"
| "ariaSetSize"
| "ariaSort"
| "ariaValueMax"
| "ariaValueMin"
| "ariaValueNow"
| "ariaValueText"
| "role"
| "nextElementSibling"
| "previousElementSibling"
| "childElementCount"
| "children"
| "firstElementChild"
| "lastElementChild"
| "assignedSlot"
| "attributeStyleMap"
| "style"
| "contentEditable"
| "enterKeyHint"
| "inputMode"
| "isContentEditable"
| "autofocus"
| "dataset"
| "nonce"
| "tabIndex"
| "type"
| "form"
| "pattern"
| "name"
| "align"
| "height"
| "useMap"
| "validationMessage"
| "validity"
| "width"
| "willValidate"
| "accept"
| "alt"
| "autocomplete"
| "capture"
| "checked"
| "defaultChecked"
| "defaultValue"
| "dirName"
| "disabled"
| "files"
| "formAction"
| "formEnctype"
| "formMethod"
| "formNoValidate"
| "formTarget"
| "indeterminate"
| "labels"
| "list"
| "max"
| "maxLength"
| "min"
| "minLength"
| "multiple"
| "placeholder"
| "readOnly"
| "required"
| "selectionDirection"
| "selectionEnd"
| "selectionStart"
| "size"
| "src"
| "step"
| "value"
| "valueAsDate"
| "valueAsNumber"
| "webkitEntries"
| "webkitdirectory"
| "popoverTargetAction"
| "popoverTargetElement",
>,
>,
> & Partial<
Pick<
HTMLInputElement,
"name"
| "defaultValue"
| "disabled"
| "required"
| "value",
>,
> & DataObject & Pick<VNode, "key" | "is" | "ref"> & Omit<
Partial<
ARIAMixin & EventHandlers<HTMLElement, HTMLElementEventMap> & DOMProps_Read2Write<
Pick<
HTMLElement,
| "tagName"
| "slot"
| "accessKey"
| "accessKeyLabel"
| "autocapitalize"
| "autocorrect"
| "dir"
| "draggable"
| "hidden"
| "inert"
| "innerText"
| "lang"
| "offsetHeight"
| "offsetLeft"
| "offsetParent"
| "offsetTop"
| "offsetWidth"
| "outerText"
| "popover"
| "spellcheck"
| "title"
| "translate"
| "writingSuggestions"
| "attributes"
| "classList"
| "className"
| "clientHeight"
| "clientLeft"
| "clientTop"
| "clientWidth"
| "currentCSSZoom"
| "id"
| "innerHTML"
| "localName"
| "namespaceURI"
| "outerHTML"
| "part"
| "prefix"
| "scrollHeight"
| "scrollLeft"
| "scrollTop"
| "scrollWidth"
| "shadowRoot"
| "ariaActiveDescendantElement"
| "ariaAtomic"
| "ariaAutoComplete"
| "ariaBrailleLabel"
| "ariaBrailleRoleDescription"
| "ariaBusy"
| "ariaChecked"
| "ariaColCount"
| "ariaColIndex"
| "ariaColIndexText"
| "ariaColSpan"
| "ariaControlsElements"
| "ariaCurrent"
| "ariaDescribedByElements"
| "ariaDescription"
| "ariaDetailsElements"
| "ariaDisabled"
| "ariaErrorMessageElements"
| "ariaExpanded"
| "ariaFlowToElements"
| "ariaHasPopup"
| "ariaHidden"
| "ariaInvalid"
| "ariaKeyShortcuts"
| "ariaLabel"
| "ariaLabelledByElements"
| "ariaLevel"
| "ariaLive"
| "ariaModal"
| "ariaMultiLine"
| "ariaMultiSelectable"
| "ariaOrientation"
| "ariaOwnsElements"
| "ariaPlaceholder"
| "ariaPosInSet"
| "ariaPressed"
| "ariaReadOnly"
| "ariaRelevant"
| "ariaRequired"
| "ariaRoleDescription"
| "ariaRowCount"
| "ariaRowIndex"
| "ariaRowIndexText"
| "ariaRowSpan"
| "ariaSelected"
| "ariaSetSize"
| "ariaSort"
| "ariaValueMax"
| "ariaValueMin"
| "ariaValueNow"
| "ariaValueText"
| "role"
| "nextElementSibling"
| "previousElementSibling"
| "childElementCount"
| "children"
| "firstElementChild"
| "lastElementChild"
| "assignedSlot"
| "attributeStyleMap"
| "style"
| "contentEditable"
| "enterKeyHint"
| "inputMode"
| "isContentEditable"
| "autofocus"
| "dataset"
| "nonce"
| "tabIndex",
>,
>,
>,
"children",
> & {}
renderer
renderer: DOMRenderer
root
root: ParentNode
update
Optionalupdated
updatedCallback?: () => any
Called at DOM tree updated
+WebCell
Classes
Type Aliases
- AFC
- AnimationMode
- AnimationType
- AsyncFunctionComponent
- AttentionSeekers
- AwaitedComponent
- BackEntrances
- BackExits
- BouncingEntrances
- BouncingExits
- ClassComponent
- ComponentProps
- ComponentTag
- ComponentType
- Direction
- DirectionX
- DirectionY
- FadingEntrances
- FadingExits
- FC
- Flippers
- FunctionComponent
- Lightspeed
- ObservableComponent
- PositionY
- PropsWithChildren
- ReactionEffect
- ReactionExpression
- RotatingEntrances
- RotatingExits
- SlidingEntrances
- SlidingExits
- Specials
- WebCellComponent
- WebCellProps
- ZoomingEntrances
- ZoomingExits
Async load: {children}
;\n\nexport default AsyncLoad;\n"],"names":["parcelRequire","$parcel$global","globalThis","parcelRegister","register","module","exports","Object","defineProperty","value","configurable","get","$5d5d6c86dc98af0a$export$2e2bcd8739ae039","set","s","enumerable","$ewYDA","children","jsxs"],"version":3,"file":"Async.872f5ccf.js.map"} \ No newline at end of file diff --git a/preview/Async.tsx b/preview/Async.tsx deleted file mode 100644 index 9b77808..0000000 --- a/preview/Async.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import { FC, PropsWithChildren } from '../source'; - -const AsyncLoad: FCAsync load: {children}
; - -export default AsyncLoad; diff --git a/preview/Clock.tsx b/preview/Clock.tsx deleted file mode 100644 index 9738da2..0000000 --- a/preview/Clock.tsx +++ /dev/null @@ -1,77 +0,0 @@ -import { IReactionPublic, observable } from 'mobx'; -import { Second } from 'web-utility'; - -import { - attribute, - component, - observer, - on, - reaction, - WebCell -} from '../source'; -import { renderMode } from './utility'; - -class ClockModel { - @observable - accessor time = new Date(); - - constructor() { - setInterval(() => (this.time = new Date()), Second); - } -} - -const clockStore = new ClockModel(); - -export const FunctionClock = observer(() => { - const { time } = clockStore; - - return ( - - ); -}); - -export interface ClassClock extends WebCell {} - -@component({ - tagName: 'class-clock', - mode: 'open', - renderMode -}) -@observer -export class ClassClock extends HTMLElement implements WebCell { - @attribute - @observable - accessor time = new Date(); - - private timer: number; - - connectedCallback() { - this.timer = window.setInterval(() => (this.time = new Date()), Second); - } - - disconnectedCallback() { - clearInterval(this.timer); - } - - @reaction(({ time }) => time) - handleReaction(newValue: Date, oldValue: Date, reaction: IReactionPublic) { - console.info(newValue, oldValue, reaction); - } - - @on('click', 'time') - handleClick(event: MouseEvent, currentTarget: HTMLTimeElement) { - console.info(event, currentTarget); - } - - render() { - const { time } = this; - - return ( - - ); - } -} diff --git a/preview/Field.tsx b/preview/Field.tsx deleted file mode 100644 index 4855f6f..0000000 --- a/preview/Field.tsx +++ /dev/null @@ -1,24 +0,0 @@ -import { component, formField, observer, WebField } from '../source'; - -export interface TestField extends WebField {} - -@component({ - tagName: 'test-field', - mode: 'open' -}) -@formField -@observer -export class TestField extends HTMLElement implements WebField { - render() { - const { name } = this; - - return ( - - (this.value = (currentTarget as HTMLInputElement).value) - } - /> - ); - } -} diff --git a/preview/Home.tsx b/preview/Home.tsx deleted file mode 100644 index 243252a..0000000 --- a/preview/Home.tsx +++ /dev/null @@ -1,49 +0,0 @@ -import { formToJSON, sleep } from 'web-utility'; - -import { AnimateCSS, FC, lazy, observer, PropsWithChildren, WebCellProps } from '../source'; -import { ClassClock, FunctionClock } from './Clock'; -import { TestField } from './Field'; - -const AsyncLoad = lazy(() => import('./Async')); - -const Hello: FCHello {children}!
-); - -const AsyncComponent = observer(async ({ children }: PropsWithChildren) => { - await sleep(1); - - returnAsync Component: {children}
; -}); - -export const HomePage = () => ( - <> -
- We use the same configuration as Parcel to bundle this sandbox, you can find more info
- about Parcel
-
- here
-
- .
-
-
- -
-
-
-
-
- -
-
-
-
Called at first time of DOM tree updated
+