Enter into a component

webflow.enterComponent(instance)

Focus the Designer on a component definition in order to make changes. When a component is in focus, all globals pertain specifically to that component definition, not the entire Site.

Syntax

1webflow.enterComponent(instance: ComponentElement): Promise<null>

Parameters

  • instance: ComponentElement - A Component Instance that is present on the page. If there’s no current instance, you’ll need to create one first.

Returns

Promise<null>

A Promise that resolves to null when the context switch is successful.

Example

1// Step 1: Fetch the currently selected element
2const selectedElement = await webflow.getSelectedElement();
3
4if (selectedElement && selectedElement.type === "ComponentInstance") {
5
6  //  Step 2: Enter the context of the selected ComponentElement 
7  await webflow.enterComponent(selectedElement as ComponentElement);
8  console.log("Successfully entered the component context.");
9
10  // Step 3: After entering the component's context, fetch the root element
11  const rootElement = await webflow.getRootElement();
12  if (rootElement) {
13    console.log("Root element of the component:", rootElement);
14  } else {
15    console.log("No root element found in this component context.");
16  }
17
18} else {
19  console.log("The selected element is not a ComponentElement.");
20}

Designer Ability

Designer AbilityLocaleBranchWorkflowSiteMode
canModifyComponentsanyanycanvasDesign