CODEWITHSUNDEEP
javascripthtml
Prisoner ZERO
Prisoner ZERO

Reputation: 14176

Is it safe to create Custom HTML Tags?

I am reading about a technique wherein you can create custom HTML tags, like so:

<!-- REGISTER CUSTOM ELEMENTS -->
<script type="text/javascript">
    var ApplicationContainer = document.registerElement('application-container');
    document.body.appendChild(new ApplicationContainer());
</script>

Given there is a variety of browsers & browser-versions out there, I was wondering:

...I'm just curious, really.

Upvotes: 3

Views: 660

Answers (4)

Snuggs
Snuggs

Reputation: 811

@PrisonerZER0 I wouldn't call "Olde browsers" the word "safe". Somewhat of an oxymoron. Even M$ has put IE in a coffin. https://www.microsoft.com/en-us/windowsforbusiness/end-of-ie-support

Us supporting them is only asking for trouble. Thanks for the shout.

I created the snuggsi ใƒ„ (https://github.com/devpunks/snuggsi) library as a suite of conventions over the web components/custom elements native browser spec. My philosophy is you shouldn't need to know node, webpack, babel, etc. Should only need to know basic HTML,CSS,JS to be productive in 2017. The following snippet is a perfect example.

Feel free to reach out on github as it seems like you are up to snuff with modern platform development. We won't need these convoluted front end tools where we are going๐Ÿš€ Feel free to reach out on 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>

Upvotes: 1

guest271314
guest271314

Reputation: 1

According to snuggsi

Web Components ARE ready for production

& Custom Elements v1 has full support for every modern browser including Internet Explorer 11+ / Edge

It is not immediately clear what you mean by "safe", as that is a rather broad and indefinite term.

Upvotes: 2

Ramin Ahmadi
Ramin Ahmadi

Reputation: 639

I wouldn't recommend that. you should be able to implement whatever you need using existing HTML tags. you need to think of your requirements again. do you need a new HTML tag to make it distinctive from existing ones? if yes you can always use data attributes to distinguish it from others. but if you essentially need to create a custom tag, Google developers has a very interesting walk through. hope my answer has been helpful.

Upvotes: 2

Ian
Ian

Reputation: 3676

No this is not recommended unless you have some sort of polyfill. It is unsupported in most browsers, see caniuse.

There are a few known polyfills however they do have their setbacks. WebComponents Repository

Upvotes: 2

Related Questions