data-option-<​name>

Use data-option-<name> attributes to configure the options of components from your HTML.

READ MORE

• Configuration: config.options
• Guide: managing options

data-option-no-<​name>

When using a boolean option, you can negate its value by prefixing its name with no-.

import { Base } from '@studiometa/js-toolkit';

/**
 * @extends {Base<{ $options: { open: boolean } }>}
 */
class Component extends Base {
  static config = {
    name: 'Component',
    options: {
      open: {
        type: Boolean,
        default: true,
      },
    },
  };

  mounted() {
    console.log(this.$options.open); // false
  }
}

<div data-component="Component" data-option-no-open></div>