The Component element represents a component instance within the Webflow Designer. Use the methods below on a component instance.

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`	"ComponentInstance"
`children`	Indicates whether the element can contain child elements.	`boolean`	`false`
`customAttributes`	Indicates whether the element can have custom attributes.	`boolean`	`false`
`styles`	Indicates whether the element can contain styles.	`boolean`	`false`
`textContent`	Indicates whether the element can contain text content	`boolean`	`false`

Methods

`element.getComponent()`

Retrieves the associated component of the element.

Syntax

element.getComponent(): Promise<Component>

Returns

Promise<Component>

A Promise that resolves to a Component Object

Example

// Select Component Element on Page
const elements = await webflow.getAllElements()
const componentInstance = elements.find(el => el.type === 'ComponentInstance')

if (componentInstance?.type === "ComponentInstance") {

  // Get Component object from instance
  const component = await componentInstance?.getComponent()
  const componentName = await component.getName()
  console.log(componentName)
} else {
  console.log("No component element found")
}