ayo/wcb
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat(templating): support adding aria- attributes

Browse source
This commit is contained in:
Ayo 2023-12-09 09:54:35 +01:00
parent 669fee1d49
commit 538aa01ecd
3 changed files with 23 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
examples/templating/index.js
View file

@ -12,6 +12,8 @@ export class Counter extends WebComponent {
onClick=${() => ++this.props.count} onClick=${() => ++this.props.count}
style="background-color: green; color: white;" style="background-color: green; color: white;"
about="Elephant" about="Elephant"
data-name="thing"
aria-name="thingz"
> >
<span>${this.props.count}</span> <span>${this.props.count}</span>
</button> </button>

2
package.json
View file

@ -1,6 +1,6 @@
{ {
"name": "web-component-base", "name": "web-component-base",
"version": "2.0.0-beta.17", "version": "2.0.0-beta.18",
"description": "A zero-dependency, ~600 Bytes (minified & gzipped), JS base class for creating reactive custom elements easily", "description": "A zero-dependency, ~600 Bytes (minified & gzipped), JS base class for creating reactive custom elements easily",
"type": "module", "type": "module",
"exports": { "exports": {

25
src/utils/create-element.js
View file

@ -10,19 +10,26 @@ export function createElement(tree) {
} else { } else {
const el = document.createElement(tree.type); const el = document.createElement(tree.type);
if (tree.props) { if (tree.props) {
Object.keys(tree.props).forEach(prop => { Object.keys(tree.props).forEach((prop) => {
let domProp = prop.toLowerCase(); let domProp = prop.toLowerCase();
if (domProp.startsWith('data-')) { let value = tree.props[prop];
const dataProp = domProp.replace('data-', ''); if (domProp.startsWith("data-")) {
el.dataset[getCamelCase(dataProp)] = tree.props[prop]; const dataProp = domProp.replace("data-", "");
el.dataset[getCamelCase(dataProp)] = value;
} else if (domProp.startsWith("aria-")) {
el.setAttribute(domProp, value);
} else { } else {
switch(domProp) { switch (domProp) {
case 'class': domProp = 'className'; break; case "class":
case 'for': domProp = 'htmlFor'; break; domProp = "className";
break;
case "for":
domProp = "htmlFor";
break;
} }
if (domProp in el) el[domProp] = tree.props[prop] if (domProp in el) el[domProp] = value;
} }
}) });
} }
tree.children?.forEach((child) => { tree.children?.forEach((child) => {
const childEl = createElement(child); const childEl = createElement(child);