How do we use custom elements?

[Joe Pea]

How would I use a custom element named some-element in Turbine?

[Joe Pea]

Ah, looks like we can basically just use element() like shown here: https://github.com/funkia/turbine/blob/master/src/elements.ts#L29.

So

element('some-element')({class: 'foo'}, [...children])

That should cover most cases, but there might still be special cases like with input. Is there some way to address this?

I'm not sure if this is any better, but maybe all args can be in one function call:

element('some-element', {class: 'foo'}, [...children])

[Simon Friis Vindum]

Hello @trusktr. You've almost figured it all out by yourself 😄

The element function takes a tag name and a description object. It then returns a function that creates DOM elements that match the description.

I'm not sure if this is any better, but maybe all args can be in one function call:

You currently can't give a child. But you can give a second argument. This is what it looks like:

const myButton = element("button", {style: {border: "1px solid black"}});
// use the button like this
myButton({style: {background: "blue"}}, "Click me");

Here the initial style object will be combined with the second style object when the final element is created in the DOM.

We may consider also allowing a third argument. But the idea is that element shouldn't be used directly inside the view. Instead one would use element to create some named component and then use the resulting function inside ones view.

That should cover most cases, but there might still be special cases like with input. Is there some way to address this?

What sort of special case are you thinking of?