Is it safe to create custom HTML tags?
I am reading about a technique where you can create your own HTML tags like:
<!-- REGISTER CUSTOM ELEMENTS -->
<script type="text/javascript">
var ApplicationContainer = document.registerElement('application-container');
document.body.appendChild(new ApplicationContainer());
</script>
Given that there are many browsers and browser versions, I was wondering:
- Is it safe to create custom tags?
- If not, what is the proper job?
... I'm just wondering, really.
source to share
@ PrisonerZER0 I wouldn't call "safe" by "Olde browsers". A few oxymorons. Even M $ put IE in the coffin. https://www.microsoft.com/en-us/windowsforbusiness/end-of-ie-support
We who support them are only asking problems. Thanks for the cry.
I created a library snuggsi ツ
(https://github.com/devpunks/snuggsi) as a set of conventions for web components / custom items. Browser spec, My philosophy is that you don't need to know node, webpack, babel, etc. You only need to know basic HTML, CSS, JS to be productive in 2017. The following snippet is a perfect example.
Feel free to check out github as you feel like you are able to sniff with modern platform development. We won't need these confusing front end tools wherever we go. Feel free to check out github so I can help you get started.
<hello-world>
Hello {planet}
</hello-world>
<!-- more info @ https://github.com/devpunks/snuggsi -->
<script src=//unpkg.com/snuggsi></script>
<script>
// Element Definition -----------------------------
Element `hello-world`
// Class Description ------------------------------
(class extends HTMLElement {
get planet ()
// "automagic" token binding
{ return 'world 🌎' }
onclick ()
// "automagic" event registration
{ alert (this) }
})
</script>
source to share
No, this is not recommended unless you have some sort of polyfill. It is not supported in most browsers, see caniuse .
There are several well-known polynomials, but they have their failures. WebComponents Repository
source to share
I would not recommend this. you should be able to implement whatever you need using existing HTML tags. you need to think again about your requirements. do you need a new HTML tag to be different from the existing ones? if so, you can always use data attributes to distinguish them from others. but if you essentially need to create a custom tag, google devs has a very interesting walk around. hope my answer was helpful.
source to share
According to snuggsi
ARE web components production ready
& Custom Elements v1 has full support for every modern browser including Internet Explorer 11 + / Edge
It is not immediately clear what you mean by "secure" as it is a rather broad and vague term.
source to share