Are custom elements safe to use?

Given that Meteor apps are typically run on modern browsers, is it safe to say that we can use custom elements in our app?

What I am talking about is rather than going with:

<div class="panel"></div>

just use

 <panel></panel>

In all my testing it works fine, but not sure if it is the right way to go…

phantom.js can’t handle webcomponents.js (a required polyfill), so testing or seo packages like spiderable wouldn’t work

also, keep in mind Chrome is the only browser that has a decent support of custom elements, while others may have performance issues

in my own experience, I was very excited about using custom elements (wrapped by Google’s Polymer), as it let me overcome Blaze issues, until I hit the phantom.js wall :frowning:

I wouldn’t do that if I were you, as seems to cause more problems than it solves. Even if all browsers would render these elements, how can you guarantee that the end result would be the same on every browser?

Maybe one browser does makes them inline, maybe another handles them as block. Maybe a future release will create an element named panel that behaves differently.

I’ve actually had a similar issue happen to me, where I create an input[type="date"] element to make it’s purpose clear, and when the browsers started supporting with their own datepicker my datepickers broke horribly.

And now I wonder how hard it would be to add a middleware in Blaze that replaces <panel> with <div class="panel">

1 Like

actually, these 2 concerns are not that much of an issue

  1. custom elements can be styled in complete isolation (shadow DOM), so the browser differences concern boils down to regular cross-browser design issues, regardless of custom elements.
    as for the placement of the host element in the DOM (i.e. ), you can style it as well

  2. as for namespace conflicts, you can easily prefix all your elements (the specification dictates that at least one hyphen is mandatory in the tag name) so such conflicts are avoided

however, my posted argument against custom elements still stands :smile:

1 Like

Well, the Shadow DOM is not really supported on anywhere but Chrome, but yes you can re-style and namespace the elements. But still. More trouble than it’s worth it IMO.

But it would still be cool to be able to rewrite elements before they are sent to the browser, just so our templates can be better understood by the reader. Like a parser that would go through the document, look for no standard elements and replace them with their <span class="element-name"> counterpart perhaps but now I’m getting out of topic so I’ll stop.

Thanks for all the great points.

I think I will revert back to using standard divs with classes.
I was hoping that it would not be an issue, but I have noticed some inconsistencies and I guess it will probably get worse before it gets better.

v1 Custom Elements that are transpiled in a Meteor app will not work. You’ll get errors like this: https://github.com/meteorwebcomponents/synthesis/issues/24

It would be nice of Meteor to supply a fix!