Re: [w3c/webcomponents] Why do we really need hyphens? (#658)

> I can enhance the input by jquery only one line code`$('input').enhance();

The thing is, Custom Element means you MUST extend a class. This isn't the same with jQuery, and this is the reason you are experiencing difficulty.

The web may need a NON-extending form of components.

> condider the fact that user can disable JavaScript and DOM would still be rendered, see also explanation here.

That's fine, that is also the graceful fallback behavior that users of the current is="" attribute want. They also don't need to *extend* elements, they just need to *add* functionality. (See that long thread). So I think this component is a good way to achieve that without the complications that the other long thread is about.

A non-extending way to associate JS behavior is much simpler to implement, it is just attaching logic to some elements.

We could also make it selector based:

```js
components.define('.nav-link', class {...})
```

But that might be too heavyweight, needing selectors to be fired on every DOM change. 

Maybe a native API that allows us to pass the same component classes to act in a NodeList would be great, and we'd be one more step closer to what jQuery has already proven over and over works, for the non-declarative folks:

```js
components.create(document.querySelectorAll('.nav-link'), 'foo')
// or similar
```

using the defined component by name there. This imperatively adds `foo` to all the selected elements' is="" attribute.

And boom, we have an official way to augment any DOM without all those problems that seem to be related to extending and element's class in that other long thread. In many cases, we just need to manipulate an element, we do that actually need `this` to be the element if something else like passing the element into the constructor works. 

We can even pass it into all the lifecycle methods, and then allow people to create Singleton components where only one instance is made, and lifecycle hooks get passed the element to operate on:

```js
components.define('foo', class {
  connectedCallback(el) {
    // do something with the connected element.
  }
}, {
  singleton: true
})
```

This idea is much more desirable than the current is="" attribute!

-- 
You are receiving this because you are subscribed to this thread.
Reply to this email directly or view it on GitHub:
https://github.com/w3c/webcomponents/issues/658#issuecomment-325697119