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}
style="background-color: green; color: white;"
about="Elephant"
data-name="thing"
aria-name="thingz"
>
<span>${this.props.count}</span>
</button>

2
package.json
View file

@ -1,6 +1,6 @@
{
"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",
"type": "module",
"exports": {

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

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