Element properties & methods

Elements in Webflow have properties that determine what functionality they support. These properties are boolean flags that indicate whether an element can have certain features like children, styles, or text content. Each property unlocks a set of related methods that you can use to manipulate the element.

Core element properties

All elements have a set of core properties that determine what actions you can perform on them:

Checking element properties

Before using property-based methods, you should always check if the element has the required property:

1
const element = await Webflow.getSelectedElement();
2
3
// Check if element can have children
4
if (element?.children) {
5
  // Safe to use children-related methods
6
  await element.append(Webflow.elementPresets.Paragraph);
7
}
8
9
// Check if element can have styles
10
if (element?.styles) {
11
  // Safe to use style-related methods
12
  await element.setStyles([myStyle]);
13
}

Property-based methods

Each element property unlocks specific functionality that you can use in your Designer Extension:

Children

Methods for adding, retrieving, and managing child elements.

Styles

Methods for applying and managing styles on elements.

Text Content

Methods for setting and manipulating text content.

Custom Attributes

Methods for working with custom HTML attributes.

App Connections

Methods for connecting elements with external apps.

Best practices

1. Always check properties before using methods:

   1
   if (element?.styles) {
   2
     // Now it's safe to use style methods
   3
     await element.setStyles([myStyle]);
   4
   }

2. Combine property and type checks when needed:

   1
   if (element.type === "Paragraph" && element.textContent) {
   2
     await element.setTextContent("New paragraph text");
   3
   }

3. Handle missing properties gracefully:

   1
   try {
   2
     if (!element.children) {
   3
       console.log("This element doesn't support child elements");
   4
       return;
   5
     }
   6
     
   7
     await element.append(Webflow.elementPresets.Paragraph);
   8
   } catch (error) {
   9
     console.error("Error adding child element:", error);
   10
   }