Options

Internally, Van Elements use attachShadow to attach a Shadow root to the element. You can change attachShadow's options with an extra argument to the define function.

define("my-element", () => p("Closed root, delegating focus 🎉"), {
  mode: "closed",
  delegatesFocus: true,
});

You can read more about the Shadow root options on MDN.

Disable Shadow DOM

Instead of the options object, you can pass false as third argument to disable the Shadow DOM completely.

define(
  "van-element",
  () => p("I don't like isolation 🤗"),
  false // Passing false as 3rd argument will disable the Shadow DOM
);

Things that will stop working:

• DOM and style isolation
• slots

Everything else will work the exact same, including:

• $this, mount, attr
• all VanJS logic
• hydration and reusability

Shadow DOM or not?

You can safely disable the Shadow DOM if:

• All you want is easy hydration
• Isolation gets in the way
• You don't need slots

You should not disable it if:

• You are building isolated components (component library, design system)
• You need slots for composition