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

Property	Description	Type	Example
`id`	Unique identifier for the element composed of two identifiers, the `component` and the `element`.	`object`	`{component: "64c813...", element: "5edf8e59-71f9..."}`
`type`	Specifies the type of the element.	`string`	"DOM"
`styles`	Indicates whether the element can contain styles.	`boolean`	`true`
`children`	Indicates whether an element can contain child elements.	`boolean`	`true`
`textContent`	Indicates whether an element can contain text content.	`boolean`	`true`
`customAttributes`	Indicates whether an element can contain custom attributes.	`boolean`	`false`

Methods

`element.getTag()`

Retrieve the HTML tag of the element.

Syntax

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

// Get All Elements and find first DOM Element
const elements = await webflow.getAllElements()
const DOMElement = elements.find(element => element.type === "DOM")

if (DOMElement?.type === "DOM") {

  // Get DOM Element's Tag
  const tag = await DOMElement.getTag()
  console.log(tag)

} else {
  console.log('No DOM Element Found')
}

`element.setTag(tag)`

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

Syntax

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

// Get Selected Element
const selectedElement = await webflow.getSelectedElement();

if (selectedElement?.children) {

  // Create and append DOM Element
  const DOMElement = await selectedElement.append(webflow.elementPresets.DOM);
  console.log(DOMElement)

  // Set Tag
  await DOMElement?.setTag('img');
  const tag = await DOMElement.getTag()
  }

`element.getAllAttributes()`

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

Syntax

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

Returns

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

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

Example

// Get Selected Element
const selectedElement = await webflow.getSelectedElement();

if (selectedElement?.type === "DOM") {

  const customAttributes = await selectedElement.getAllAttributes()
  console.log(customAttributes)
}

`element.getAttribute(name)`

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

Syntax

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

// Get All Elements and find first DOM Element
const elements = await webflow.getAllElements()
const DOMElement = elements.find(element => element.type === "DOM")

if (DOMElement?.type === "DOM") {

  // Get DOM Element's Attribute by Name
  const attribute = await DOMElement.getAttribute("MyAttribute")
  console.log(attribute)

} else {
  console.log('No DOM Element Found')
}

`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

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

// Get All Elements and find first DOM Element
const elements = await webflow.getAllElements()
const DOMElement = elements.find(element => element.type === "DOM")

if (DOMElement?.type === "DOM") {

  // Set and print DOM Element's Attributes
  await DOMElement.setAttribute("hello", "world")
  const attributes = await DOMElement.getAllAttributes()
  console.log(attributes)

} else {
  console.log('No DOM Element Found')
}

`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

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

Parameters

name: string - The name of the attribute

Returns

Promise<null>

A promise that resolves to null

Example

// Get All Elements and find first DOM Element
const elements = await webflow.getAllElements()
const DOMElement = elements.find(element => element.type === "DOM")

if (DOMElement?.type === "DOM") {
  
  // Get Attributes
  const customAttributes = await DOMElement.getAllAttributes()
  console.log(customAttributes)

  // Remove and print DOM Element's Attributes
  await DOMElement.removeAttribute("tooltip")
  const attributes = await DOMElement.getAllAttributes()
  console.log(attributes)

} else {
  console.log('No DOM Element Found')
}