Van Element 2.0

[Atmos4]

I am happy to announce [email protected] ☀️

The only breaking change is the removal of the children prop, which didn't work well and felt a bit awkward to use.

The mount function can now be called many times, which allows for the creation of reusable hooks 🥳

Check out the main repository for more information!

[Tao-VanJS]

Congratulations to the launch!

[sysmat]

how to use it inside van app?

[sysmat]

• it renders nothing(no browser error) using https://github.com/Atmos4/van-element?tab=readme-ov-file#usage

define('custom-counter', () => {
  const counter = van.state(0);
  return div(
    slot(),
    counter,
    button({ class: buttonCss, onclick: () => ++counter.val }, '+'),
    button({ class: buttonCss, onclick: () => --counter.val }, '-')
  );
});

div(
    {
      class: 'flex flex-wrap items-center justify-between max-w-screen-xl px-4 mx-auto',
    },    
    van.tags['my-custom-element']    
  );

[Atmos4]

Haha that's because you need to use a tag you defined 😅 so for example here if you define an element called custom-counter, you will be able to access it with van.tags["custom-counter"]

[sysmat]

@Atmos4 thx, but tailwind css not working

export const buttonCss =
	'px-4 py-1 text-sm text-[#E65A00] font-semibold rounded-full border border-orange-200 hover:text-white hover:bg-orange-600 hover:border-transparent focus:outline-none focus:ring-2 focus:ring-purple-600 focus:ring-offset-2';

[Atmos4]

That's because by default, Van Element will enable the shadow DOM, which provides isolation from global styles. You can disable it like this:

vane.define("custom-counter", () => {
  ...
}, false);

Keep in mind that if you disable it, you cannot use slots anymore as this mechanism is tied to the Shadow DOM.

[sysmat]

@Atmos4 thx