Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: use shadow mode #39

Merged
merged 7 commits into from
Dec 26, 2023
Merged

feat: use shadow mode #39

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
497bd42
chore: test pre-commit hook
ayoayco Dec 23, 2023
ff1495a
feat: shadow dom usage
ayoayco Dec 23, 2023
02e518f
feat: use getter for shadowMode
ayoayco Dec 23, 2023
fb77725
refactor: remove unneeded changes
ayoayco Dec 24, 2023
1c2c2bc
Merge branch 'main' of github.com:ayoayco/web-component-base into fea…
ayoayco Dec 24, 2023
039776e
feat: allow all ShadowRootInit options
ayoayco Dec 26, 2023
3c9547a
chore: bump beta version
ayoayco Dec 26, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 13 additions & 0 deletions examples/use-shadow/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>WC demo</title>
<script type="module" src="./index.js"></script>
</head>
<body>
<h2>With our html</h2>
<my-counter></my-counter>
</body>
</html>
55 changes: 55 additions & 0 deletions examples/use-shadow/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,55 @@
// @ts-check
import { WebComponent, html } from "../../src/index.js";

export class Counter extends WebComponent {
static props = {
count: 123,
};
static shadowRootInit = {
mode: "closed",
};

get template() {
const list = ["a", "b", "c", "what"];
const links = [
{
url: "https://ayco.io",
text: "Ayo Ayco",
},
{
url: "https://ayco.io/gh/McFly",
text: "McFly",
},
];

return html`
<button
class="hey"
id="btn"
onClick=${() => ++this.props.count}
style=${{ backgroundColor: "green", color: "white" }}
about="Elephant"
data-name="thing"
aria-name="thingz"
>
<span>${this.props.count}</span>
</button>
<form style="margin: 1em 0;">
<label data-my-name="Ayo" for="the-input">Name</label>
<input id="the-input" type="foo" value="Name:" />
</form>
${list.map((item) => html`<p>${item}</p>`)}
<h3 about="Elephant">Links</h3>
<ul>
${links.map(
(link) =>
html`<li>
<a href=${link.url} target="_blank">${link.text}</a>
</li>`
)}
</ul>
`;
}
}

customElements.define("my-counter", Counter);
2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "web-component-base",
"version": "2.1.0-beta.1",
"version": "2.1.0-beta.2",
"description": "A zero-dependency & tiny JS base class for creating reactive custom elements easily",
"type": "module",
"exports": {
Expand Down
18 changes: 14 additions & 4 deletions src/WebComponent.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,12 @@ export class WebComponent extends HTMLElement {
return "";
}

/**
* Shadow root initialization options
* @type {ShadowRootInit}
*/
static shadowRootInit;

/**
* Read-only property containing camelCase counterparts of observed attributes.
* @see https://www.npmjs.com/package/web-component-base#prop-access
Expand Down Expand Up @@ -146,7 +152,7 @@ export class WebComponent extends HTMLElement {
throw TypeError(
`Cannot assign ${typeof value} to ${
typeMap[prop]
} property (setting '${prop}' of ${meta.constructor.name})`,
} property (setting '${prop}' of ${meta.constructor.name})`
);
} else if (oldValue !== value) {
obj[prop] = value;
Expand Down Expand Up @@ -178,7 +184,7 @@ export class WebComponent extends HTMLElement {
if (!this.#props) {
this.#props = new Proxy(
initialProps,
this.#handler((key, value) => this.setAttribute(key, value), this),
this.#handler((key, value) => this.setAttribute(key, value), this)
);
}
}
Expand All @@ -188,14 +194,18 @@ export class WebComponent extends HTMLElement {
if (typeof this.template === "string") {
this.innerHTML = this.template;
} else if (typeof this.template === "object") {
let host = this;
if (this.constructor.shadowRootInit) {
host = this.attachShadow(this.constructor.shadowRootInit);
}
const tree = this.template;

// TODO: smart diffing
if (JSON.stringify(this.#prevDOM) !== JSON.stringify(tree)) {
const el = createElement(tree);
if (el) {
if (Array.isArray(el)) this.replaceChildren(...el);
else this.replaceChildren(el);
if (Array.isArray(el)) host.replaceChildren(...el);
else host.replaceChildren(el);
}
this.#prevDOM = tree;
}
Expand Down