The custom element, also known as the DOM Element, is a placeholder element that you can add any HTML custom attribute, tag, or text to — thereby “creating” that element on the canvas. This is useful for adding HTML elements to the canvas that aren’t available as native Webflow elements.

Once you add the custom element to the canvas, you’re able to use the below methods, which are only available to the DOM element, as well as the more general element methods to manage children, styles, and text content.

Properties

Methods

element.getTag()

Retrieve the HTML tag of the element.

Syntax

1
element.getTag(): Promise<null | string>

Returns

• Promise<String> : If the DOMElement has a tag, a promise that resolves to the tag value.
• Promise<null>: If the DOMElement does not have a tag, a promise that resolves to null

Example

1
// Get All Elements and find first DOM Element
2
const elements = await webflow.getAllElements()
3
const DOMElement = elements.find(element => element.type === "DOM")
4
5
if (DOMElement?.type === "DOM") {
6
7
  // Get DOM Element's Tag
8
  const tag = await DOMElement.getTag()
9
  console.log(tag)
10
11
} else {
12
  console.log('No DOM Element Found')
13
}

Designer Ability

Checks for authorization only

element.setTag(tag)

Set the value of the specified HTML tag of the DOMElement.

Syntax

1
element.setTag(tag: string): Promise<null>

Parameters

• tag : string - The HTML tag to set for the element

Returns

Promise<null>

A promise that resolves to null

Example

1
// Get Selected Element
2
const selectedElement = await webflow.getSelectedElement();
3
4
if (selectedElement?.children) {
5
6
  // Create and append DOM Element
7
  const DOMElement = await selectedElement.append(webflow.elementPresets.DOM);
8
  console.log(DOMElement)
9
10
  // Set Tag
11
  await DOMElement?.setTag('img');
12
  const tag = await DOMElement.getTag()
13
  }

Designer Ability

element.getAllAttributes()

Retrieve all HTML attributes for the DOMElement. Use this method instead of the ‘Custom Attribute’ methods.

Syntax

1
element.getAllAttributes(): Promise<Array<NamedValue>>

Returns

Promise<NamedValue> - {name: string, value:string }

A promise that resolves to an array of, NamedValue attribute objects.

Example

1
// Get Selected Element
2
const selectedElement = await webflow.getSelectedElement();
3
4
if (selectedElement?.type === "DOM") {
5
6
  const customAttributes = await selectedElement.getAllAttributes()
7
  console.log(customAttributes)
8
}

Designer Ability

Checks for authorization only

element.getAttribute(name)

Retrieve the value of the named HTML attribute of the DOMElement. Use this method instead of the ‘Custom Attribute’ methods.

Syntax

1
element.getAttribute(name: string): Promise<null | string>

Parameters

• name : string - The name of the attribute

Returns

• Promise<String>: A promise that resolves to the value of the named HTML attribute for the DOMElement.
• Promise<null>: If the attribute does not exist, this method will return null.

Example

1
// Get All Elements and find first DOM Element
2
const elements = await webflow.getAllElements()
3
const DOMElement = elements.find(element => element.type === "DOM")
4
5
if (DOMElement?.type === "DOM") {
6
7
  // Get DOM Element's Attribute by Name
8
  const attribute = await DOMElement.getAttribute("MyAttribute")
9
  console.log(attribute)
10
11
} else {
12
  console.log('No DOM Element Found')
13
}

Designer Ability

Checks for authorization only

element.setAttribute(name, value)

Set the value of the specified HTML attribute for the DOMElement. Use this method instead of the ‘Custom Attribute’ methods.

Syntax

1
element.setAttribute(name: string; value: string): Promise<null>

Parameters

• name: string - The name of the attribute
• value: string - The value of the attribute

Returns

Promise<null>

A promise that resolves to null

Example

1
// Get All Elements and find first DOM Element
2
const elements = await webflow.getAllElements()
3
const DOMElement = elements.find(element => element.type === "DOM")
4
5
if (DOMElement?.type === "DOM") {
6
7
  // Set and print DOM Element's Attributes
8
  await DOMElement.setAttribute("hello", "world")
9
  const attributes = await DOMElement.getAllAttributes()
10
  console.log(attributes)
11
12
} else {
13
  console.log('No DOM Element Found')
14
}

Designer Ability

element.removeAttribute(name)

Removes the specified HTML attribute from the DOMElement. If the attribute does not exist, this method will do nothing. Use this method instead of the ‘Custom Attribute’ methods.

Syntax

1
element.removeAttribute(name: string): Promise<null>

Parameters

• name: string - The name of the attribute

Returns

Promise<null>

A promise that resolves to null

Example

1
// Get All Elements and find first DOM Element
2
const elements = await webflow.getAllElements()
3
const DOMElement = elements.find(element => element.type === "DOM")
4
5
if (DOMElement?.type === "DOM") {
6
  
7
  // Get Attributes
8
  const customAttributes = await DOMElement.getAllAttributes()
9
  console.log(customAttributes)
10
11
  // Remove and print DOM Element's Attributes
12
  await DOMElement.removeAttribute("tooltip")
13
  const attributes = await DOMElement.getAllAttributes()
14
  console.log(attributes)
15
16
} else {
17
  console.log('No DOM Element Found')
18
}

Designer Ability