Using custom web components with van.tags

[deanebarker]

How can I integrate VanJS with custom web components? By definition, these tags have a dash in the title, and I don't believe this works for JavaScript variable names.

So this does not work --

const my-web-component = van.tags

[Tao-VanJS]

Try this?

const {"my-web-component": myWebComponent} = van.tags

[deanebarker]

Yes, worked perfectly. Thank you.

[deanebarker]

How about setting attributes with hyphens in the name?

slInput(
{
  help-text: "This clearly doesn't work..."
})

[Tao-VanJS]

Try this:

slInput({
  "help-text": "This clearly doesn't work..."
})

See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Grammar_and_types#object_literals for more information about object literals in JavaScript.

[sirenkovladd]

slInput({
  "help-text": "This clearly doesn't work...",
  ["help-text"]: "This clearly doesn't work...",
  [anyVar]: "This clearly doesn't work...",
})

you can read more there
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer#syntax