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

webflow.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

// Step 1: Fetch the currently selected element
const selectedElement = await webflow.getSelectedElement();

if (selectedElement && selectedElement.type === "ComponentInstance") {

  //  Step 2: Enter the context of the selected ComponentElement 
  await webflow.enterComponent(selectedElement as ComponentElement);
  console.log("Successfully entered the component context.");

  // Step 3: After entering the component's context, fetch the root element
  const rootElement = await webflow.getRootElement();
  if (rootElement) {
    console.log("Root element of the component:", rootElement);
  } else {
    console.log("No root element found in this component context.");
  }

} else {
  console.log("The selected element is not a ComponentElement.");
}