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

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

Related types:

1
type BindingInput =
2
  | { sourceType: 'prop'; propId: string }
3
  | { sourceType: 'cms'; collectionId: string; fieldId: string }
4
  | { sourceType: 'page'; fieldKey: string }
5
  | { sourceType: 'locale'; fieldKey: string }
6
  | { 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

1
const element = await webflow.getSelectedElement();
2
3
if (element?.domId) {
4
5
  // Set a static ID
6
  await element.setDomId('hero-section');
7
8
  // Bind the ID to a CMS field
9
  await element.setDomId({
10
    sourceType: 'cms',
11
    collectionId: 'col_abc',
12
    fieldId: 'field_xyz',
13
  });
14
}

Designer Ability