1
0
mirror of https://github.com/jaandrle/deka-dom-el synced 2024-11-22 07:49:38 +01:00

Compare commits

..

No commits in common. "969dfc5ee2dc6212bb78ffd5687ce940cae01c30" and "052362f26c72cbbf8e04e6d07d6ddd6f571117e5" have entirely different histories.

5 changed files with 362 additions and 1106 deletions

File diff suppressed because one or more lines are too long

View File

@ -1,60 +0,0 @@
import {
el,
customElementRender,
customElementWithDDE,
} from "deka-dom-el";
function ddeComponent(){
return el().append(
el("p", { className: "red" }).append(
"Hello from ", el("slot", "Custom Element"), "!"
)
);
}
export class A extends HTMLElement{
static tagName= "custom-element-without";
connectedCallback(){
customElementRender(
this,
this,
ddeComponent
);
}
}
customElementWithDDE(A);
customElements.define(A.tagName, A);
export class B extends HTMLElement{
static tagName= "custom-element-open";
connectedCallback(){
customElementRender(
this,
this.attachShadow({ mode: "open" }),
ddeComponent
);
}
}
customElementWithDDE(B);
customElements.define(B.tagName, B);
export class C extends HTMLElement{
static tagName= "custom-element-closed";
connectedCallback(){
customElementRender(
this,
this.attachShadow({ mode: "closed" }),
ddeComponent
);
}
}
customElementWithDDE(C);
customElements.define(C.tagName, C);
document.body.append(
el("style", `
.red{ color: red; }
`),
el(A.tagName).append("Without shadowRoot"),
el("hr"),
el(B.tagName).append("Open shadowRoot"),
el("hr"),
el(C.tagName).append("Closed shadowRoot"),
);

View File

@ -101,7 +101,7 @@ export function page({ pkg, info }){
information can be ${el("a", { textContent: t`Shadow DOM in Depth`, ...references.shadow_dom_depth })}. To information can be ${el("a", { textContent: t`Shadow DOM in Depth`, ...references.shadow_dom_depth })}. To
sum up, there in basic three ways to render component body: sum up, there in basic three ways to render component body:
`), `),
el(example, { src: fileURL("./components/examples/customElement/shadowRoot.js"), page_id }),
el(mnemonic) el(mnemonic)
); );

1328
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -62,12 +62,14 @@
"limit": "10.5 kB", "limit": "10.5 kB",
"gzip": false, "gzip": false,
"brotli": false "brotli": false
}, },
{ {
"path": "./signals.js", "path": "./signals.js",
"limit": "12 kB", "limit": "12 kB",
"gzip": false, "gzip": false,
"brotli": false "brotli": false
}, },
{ {
"path": "./index-with-signals.js", "path": "./index-with-signals.js",
@ -93,12 +95,12 @@
"typescript" "typescript"
], ],
"devDependencies": { "devDependencies": {
"@size-limit/preset-small-lib": "~11.0", "@size-limit/preset-small-lib": "^11.0.1",
"dts-bundler": "~0.1", "dts-bundler": "^0.1.0",
"esbuild": "~0.24", "esbuild": "^0.19.9",
"jsdom": "~25.0", "jsdom": "^23.0.1",
"jshint": "~2.13", "jshint": "^2.13.6",
"nodejsscript": "^1.0.2", "nodejsscript": "github:jaandrle/nodejsscript#dev-v1",
"size-limit-node-esbuild": "~0.3" "size-limit-node-esbuild": "^0.3.0"
} }
} }