Set DOM ID (Beta)

element.setDomId(domId)

Set the HTML id attribute of an element, or bind it to a data source.

Verify that the element has the domId property before calling this method.

Syntax

element.setDomId(domId: string): Promise<null>
element.setDomId(binding: BindingInput): Promise<null>

Related types:

type BindingInput =
  | { sourceType: 'prop'; propId: string }
  | { sourceType: 'cms'; collectionId: string; fieldId: string }
  | { sourceType: 'page'; fieldKey: string }
  | { sourceType: 'locale'; fieldKey: string }
  | { sourceType: 'localeItem'; fieldKey: string };

Parameters

• domId: string | BindingInput — The HTML id value to set on the element. The value must be a valid HTML ID; invalid characters are rejected with an error that suggests a corrected version (for example, "has spaces" is rejected with a suggestion of "has-spaces"). Reserved IDs that conflict with browser APIs (such as "top" and "self") are also rejected. Pass a BindingInput object to bind the ID to a data source such as a CMS field or component prop.

Returns

Promise<null>

A promise that resolves to null on success. Throws an Error if the value is not a valid HTML ID, the element is not found, or the value is neither a string nor a BindingInput object.

Example

const element = await webflow.getSelectedElement();
if (element?.domId) {
  // Set a static ID
  await element.setDomId('hero-section');
  // Bind the ID to a CMS field
  await element.setDomId({
    sourceType: 'cms',
    collectionId: 'col_abc',
    fieldId: 'field_xyz',
  });
}

Designer Ability