Skip to content

Instantly share code, notes, and snippets.

@WebReflection
Last active March 3, 2020 18:24
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save WebReflection/ac28e3a67fd9f871d8ebdf5a8abe0af3 to your computer and use it in GitHub Desktop.
Save WebReflection/ac28e3a67fd9f871d8ebdf5a8abe0af3 to your computer and use it in GitHub Desktop.
customElements.define('any-element', class extends Element {
get data() {
return this.dataset;
}
set data(value) {
// more or less this operation, but previously known keys,
// not found in value, should be dropped from the dataset
Object.assign(this.dataset, value);
}
get aria() {
return [...this.attributes]
.filter(attr => /^(?:role|aria-.*)$/.test(attr.name))
.reduce((o, a) => ((o[a.name.replace(/^aria-/, '')] = a.value), o), {});
}
set aria(value) {
// more or less this operation, but previously known
// aria related attributes, not found in value,
// should be dropped if not present
Object.keys(value).forEach(key => {
this.setAttribute(key === 'role' ? key : `aria-${key}`, value[key]);
});
}
});
@WebReflection
Copy link
Author

the related tweet for historical reasons: https://twitter.com/WebReflection/status/1234901261322989570

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment