Support that are not registered custom elements

[justinbmeyer]

I'd like to discuss ways of creating custom elements that are not registered custom elements. I know there are a lot of problems with this, but I'd like to do something similar to the following:

class MyTabs extends StacheElement {}

class MyAll extends StacheElement {
  static view = `<{{MyTabs}}>`
  static props = {
    tabsType: {get default() { return MyTabs; } }
  }
}

How could we make something like this work?

Could we mount behavior to an UnknownHTMLElement like <my-tabs>?

[matthewp]

Could make a name for elements that weren't registered with a name themselves.

[rjgotten]

I've been wanting this feature forever with the old can-component since I have a very strong dislike for global registration. Glad to see it's being thought of. Sadly too late for can-component to benefit from it, but still.

These would be local references only right? i.e. you could literally just make up a temporary name, provided it's free of conflict. E.g. Anything GUID or unique incrementing ID.

[justinbmeyer]

yeah, a guid might work. A unique incrementing ID could be more likely to conflict (say there were multiple versions of canjs).

I also like @matthewp 's idea of CanJS having some sort of <can-placeholder tag="my-tabs"> as a MVP for this. It would be easy to register a <can-placeholder> that more or less proxied to a MyTabs.

I like having something like tag="my-tabs" b/c you could style it [tag=my-tabs] { ... }

[rjgotten]

I like having something like tag="my-tabs" b/c you could style it [tag=my-tabs] { ... }

Not only that, but you could have a generic [tag] { display: block } which is 90% of the time what you actually want for component-level tags, rather than the silly default of inline.

---

There is also a strong parallel here with the construction of components over regular HTML tags, where the is attribute is used.
E.g. <button is="fancy-component-button">

So how about: <button is="{{ MyComponent }}"> ?

To work, all it needs is to register a generated name, and shim an additional layer of class extend around the component, which makes it inherit from the element type you're linking in onto. (That would be iirc HtmlButtonElement in the given example.)

And then for generic 'don't care what tag it uses' components, use a generic <component is="{{ MyComponent }}"> with an optional <{{ MyComponent }}> shorthand notation. Or, do what Vue does: register a local bag of components by name so you can use those aliases as tag names directly in the stache view. (Where stache will replace them with generated collision-free names on the fly.)

E.g.

class MyTabs extends StacheElement {}

class MyAll extends StacheElement {
  static view = `<my-tabs>`
  static components = { MyTabs }
}

And the resulting DOM will be something like <my-tabs-1234abc> or whatever ID generation you append.