Custom Elements - Naming Collisions Extending HTMLElement
Custom Elements are created by extending the HTMLElement class.
Therefore, when you create one, is seems you'd have to take special precautions not to give your Custom Element any custom-property-names that are already inherited from HTMLElement.
I can imagine numerous ways of avoiding these potential naming conflicts, but would be interested in other's suggestions or any best practices on the topic.
javascript es6-class custom-element native-web-component ecmascript-2018
asked Nov 20 '18 at 16:41
Lonnie BestLonnie Best
2,77153145
add a comment |
Custom Elements are created by extending the HTMLElement class.
Therefore, when you create one, is seems you'd have to take special precautions not to give your Custom Element any custom-property-names that are already inherited from HTMLElement.
I can imagine numerous ways of avoiding these potential naming conflicts, but would be interested in other's suggestions or any best practices on the topic.
javascript es6-class custom-element native-web-component ecmascript-2018
asked Nov 20 '18 at 16:41
Lonnie BestLonnie Best
2,77153145
3
Just use hyphenated attribute names likedata-foo. No HTML attributes use a hyphen.
– Jared Smith
Nov 20 '18 at 16:48
add a comment |
Custom Elements are created by extending the HTMLElement class.
Therefore, when you create one, is seems you'd have to take special precautions not to give your Custom Element any custom-property-names that are already inherited from HTMLElement.
I can imagine numerous ways of avoiding these potential naming conflicts, but would be interested in other's suggestions or any best practices on the topic.
javascript es6-class custom-element native-web-component ecmascript-2018
asked Nov 20 '18 at 16:41
Lonnie BestLonnie Best
2,77153145
Custom Elements are created by extending the HTMLElement class.
Therefore, when you create one, is seems you'd have to take special precautions not to give your Custom Element any custom-property-names that are already inherited from HTMLElement.
I can imagine numerous ways of avoiding these potential naming conflicts, but would be interested in other's suggestions or any best practices on the topic.
javascript es6-class custom-element native-web-component ecmascript-2018
javascript es6-class custom-element native-web-component ecmascript-2018
asked Nov 20 '18 at 16:41
Lonnie BestLonnie Best
2,77153145
asked Nov 20 '18 at 16:41
Lonnie BestLonnie Best
2,77153145
edited Nov 20 '18 at 17:50
Lonnie Best
asked Nov 20 '18 at 16:41
Lonnie BestLonnie Best
2,77153145
asked Nov 20 '18 at 16:41
Lonnie BestLonnie Best
2,77153145
asked Nov 20 '18 at 16:41
Lonnie BestLonnie Best
2,77153145
2,77153145
3
Just use hyphenated attribute names likedata-foo. No HTML attributes use a hyphen.
– Jared Smith
Nov 20 '18 at 16:48
add a comment |
3
Just use hyphenated attribute names likedata-foo. No HTML attributes use a hyphen.
– Jared Smith
Nov 20 '18 at 16:48
3
3
Just use hyphenated attribute names like
data-foo. No HTML attributes use a hyphen.– Jared Smith
Nov 20 '18 at 16:48
Just use hyphenated attribute names like
data-foo. No HTML attributes use a hyphen.– Jared Smith
Nov 20 '18 at 16:48
add a comment |
1 Answer
1
active
oldest
votes
As suggested by @Jared Smith, the best practice would be to use hyphenated names, and more precisely the data-* notation, accessible via the dataset property.
Note that the aria-* notation should not be used because it is reserved for accessibility.
In the end you can choose any name, except the global attributes, or the specific attributes if you extend a standard HTML element.
answered Nov 20 '18 at 17:18
SupersharpSupersharp
14.2k23071
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53397606%2fcustom-elements-naming-collisions-extending-htmlelement%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
As suggested by @Jared Smith, the best practice would be to use hyphenated names, and more precisely the data-* notation, accessible via the dataset property.
Note that the aria-* notation should not be used because it is reserved for accessibility.
In the end you can choose any name, except the global attributes, or the specific attributes if you extend a standard HTML element.
answered Nov 20 '18 at 17:18
SupersharpSupersharp
14.2k23071
add a comment |
As suggested by @Jared Smith, the best practice would be to use hyphenated names, and more precisely the data-* notation, accessible via the dataset property.
Note that the aria-* notation should not be used because it is reserved for accessibility.
In the end you can choose any name, except the global attributes, or the specific attributes if you extend a standard HTML element.
answered Nov 20 '18 at 17:18
SupersharpSupersharp
14.2k23071
add a comment |
As suggested by @Jared Smith, the best practice would be to use hyphenated names, and more precisely the data-* notation, accessible via the dataset property.
Note that the aria-* notation should not be used because it is reserved for accessibility.
In the end you can choose any name, except the global attributes, or the specific attributes if you extend a standard HTML element.
answered Nov 20 '18 at 17:18
SupersharpSupersharp
14.2k23071
As suggested by @Jared Smith, the best practice would be to use hyphenated names, and more precisely the data-* notation, accessible via the dataset property.
Note that the aria-* notation should not be used because it is reserved for accessibility.
In the end you can choose any name, except the global attributes, or the specific attributes if you extend a standard HTML element.
answered Nov 20 '18 at 17:18
SupersharpSupersharp
14.2k23071
answered Nov 20 '18 at 17:18
SupersharpSupersharp
14.2k23071
answered Nov 20 '18 at 17:18
SupersharpSupersharp
14.2k23071
answered Nov 20 '18 at 17:18
SupersharpSupersharp
14.2k23071
14.2k23071
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53397606%2fcustom-elements-naming-collisions-extending-htmlelement%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
3
Just use hyphenated attribute names like
data-foo. No HTML attributes use a hyphen.– Jared Smith
Nov 20 '18 at 16:48