|
|
|
@ -243,20 +243,18 @@ for name in $ELEM.getAttributeNames():
|
|
|
|
|
```typescript
|
|
|
|
|
// [TS] TypeScript
|
|
|
|
|
type CreateOpts = Partial<{
|
|
|
|
|
children : readonly Element[],
|
|
|
|
|
textContent: string,
|
|
|
|
|
content : string|Element|readonly Element[],
|
|
|
|
|
id : string,
|
|
|
|
|
classes : readonly string[],
|
|
|
|
|
attrs : readonly Record<string, string>,
|
|
|
|
|
dataset : readonly Record<string, string>,
|
|
|
|
|
attrs : readonly Record<string, string|boolean>,
|
|
|
|
|
dataset : readonly Record<string, string|boolean>,
|
|
|
|
|
cssvars : readonly Record<string, string>,
|
|
|
|
|
listeners : readonly Record<string, (ev: Event) => void>
|
|
|
|
|
parent : Element
|
|
|
|
|
}>;
|
|
|
|
|
function create<T extends keyof HTMLElementTagNameMap>(tagname: T,
|
|
|
|
|
{
|
|
|
|
|
children = null,
|
|
|
|
|
textContent = null,
|
|
|
|
|
content = [],
|
|
|
|
|
id = null,
|
|
|
|
|
classes = [],
|
|
|
|
|
attrs = {},
|
|
|
|
@ -268,22 +266,33 @@ function create<T extends keyof HTMLElementTagNameMap>(tagname: T,
|
|
|
|
|
|
|
|
|
|
let elem = document.createElement(tagname) as HTMLElementTagNameMap[T];
|
|
|
|
|
|
|
|
|
|
if( children !== null )
|
|
|
|
|
elem.replaceChildren(...children);
|
|
|
|
|
|
|
|
|
|
if( textContent !== null )
|
|
|
|
|
elem.textContent = textContent;
|
|
|
|
|
if( ! Array.isArray(content) )
|
|
|
|
|
content = [content];
|
|
|
|
|
elem.replaceChildren(...content);
|
|
|
|
|
|
|
|
|
|
if( id !== null )
|
|
|
|
|
elem.id = id;
|
|
|
|
|
|
|
|
|
|
elem.classList.add(...classes);
|
|
|
|
|
|
|
|
|
|
for(let attrname in attrs)
|
|
|
|
|
elem.setAttribute(attrname, attrs[attrname]);
|
|
|
|
|
|
|
|
|
|
for(let dataname in dataset)
|
|
|
|
|
elem.dataset[dataname] = dataset[dataname];
|
|
|
|
|
for(let name in attrs) {
|
|
|
|
|
const value = attrs[name];
|
|
|
|
|
if( typeof value === "boolean")
|
|
|
|
|
elem.toggleAttribute(name, value);
|
|
|
|
|
else
|
|
|
|
|
elem.setAttribute(name, value);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
for(let name in dataset) {
|
|
|
|
|
const value = dataset[name];
|
|
|
|
|
if( value === true )
|
|
|
|
|
elem.dataset[dataname] = "";
|
|
|
|
|
else if(value === false)
|
|
|
|
|
delete elem.dataset[name];
|
|
|
|
|
else
|
|
|
|
|
elem.dataset[dataname] = value;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
for(let cssvarname in cssvars)
|
|
|
|
|
elem.style.setProperty(`--${cssvarname}`, cssvars[cssvarname])
|
|
|
|
|