Re: Custom Elements: is=""

On Fri, Jun 12, 2015, at 19:41, Léonie Watson wrote:
> Is there a succinct explanation of why the is= syntax is disliked? The
> info on the WHATWG wiki explains where is= breaks, but doesn’t offer much
> on the syntax issue [1].

Esthetics aside, the main issue it is takes the concept of inheritance
developers are familiar with and stands it on its head.

The idea with inheritance is that you build a new object and it happens
to inherit from another one, so for example:

    <my-button extends=button>

makes a lot of sense. Clearly, you're building a new element that
extends the capabilities of the existing button object. With the is=
syntax, however, what it is you're doing isn't clear at all:

    <button is=my-button>

What's the message here? Oh this is just a button. Oh wait no it's not,
it's a my-button. But does it actually inherit from button? Mmm. Not
clear from the syntax. 

Further more, what about when you add a bunch of extra attributes in
there:

    <button value="45" class="button button-large" is="my-button"
    id="cta" />

It becomes hard to spot that this element isn't actually a traditional
button. Things get easily lost when scanning code. 

I'm also concerned developers will mistakenly write:

    <my-button is=button>

As it is much closer in form to what they want to achieve (see the
extend=parent syntax I wrote earlier).

So in summary it's ugly, has a high cognitive load, doesn't express the
developers intent (actually even expresses the opposite), is hard to
spot when reading code, and is error prone.

Hope this helps. :)

--tobie

Received on Saturday, 13 June 2015 12:28:41 UTC