diff --git a/addons/html_builder/static/src/builder/builder_components/builder_context.js b/addons/html_builder/static/src/builder/builder_components/builder_context.js
new file mode 100644
index 0000000000000..4779bf0e07844
--- /dev/null
+++ b/addons/html_builder/static/src/builder/builder_components/builder_context.js
@@ -0,0 +1,22 @@
+import { Component, xml } from "@odoo/owl";
+import { basicContainerBuilderComponentProps, useBuilderComponent } from "./utils";
+import { BuilderComponent } from "./builder_component";
+
+export class BuilderContext extends Component {
+ static template = xml`
+
+
+
+ `;
+ static props = {
+ ...basicContainerBuilderComponentProps,
+ slots: { type: Object },
+ };
+ static components = {
+ BuilderComponent,
+ };
+
+ setup() {
+ useBuilderComponent();
+ }
+}
diff --git a/addons/html_builder/static/src/builder/builder_components/default_builder_components.js b/addons/html_builder/static/src/builder/builder_components/default_builder_components.js
index d02c82aa91913..61f8dbb798906 100644
--- a/addons/html_builder/static/src/builder/builder_components/default_builder_components.js
+++ b/addons/html_builder/static/src/builder/builder_components/default_builder_components.js
@@ -10,8 +10,10 @@ import { BuilderColorPicker } from "./builder_colorpicker";
import { BuilderTextInput } from "./builder_text_input";
import { BuilderCheckbox } from "./builder_checkbox";
import { BuilderRange } from "./builder_range";
+import { BuilderContext } from "./builder_context";
export const defaultBuilderComponents = {
+ BuilderContext,
BuilderRow,
Dropdown,
DropdownItem,
diff --git a/addons/html_builder/static/tests/custom_tab/builder_components/builder_context.test.js b/addons/html_builder/static/tests/custom_tab/builder_components/builder_context.test.js
new file mode 100644
index 0000000000000..5c94a0ecba7f1
--- /dev/null
+++ b/addons/html_builder/static/tests/custom_tab/builder_components/builder_context.test.js
@@ -0,0 +1,34 @@
+import { expect, test } from "@odoo/hoot";
+import { xml } from "@odoo/owl";
+import { contains } from "@web/../tests/web_test_helpers";
+import {
+ addActionOption,
+ addOption,
+ defineWebsiteModels,
+ setupWebsiteBuilder,
+} from "../../helpers";
+
+defineWebsiteModels();
+
+test("should pass the context", async () => {
+ addActionOption({
+ customAction: {
+ apply: ({ param, value }) => {
+ expect.step(`customAction ${param} ${value}`);
+ },
+ },
+ });
+ addOption({
+ selector: ".test-options-target",
+ template: xml`
+
+ MyAction
+
+ `,
+ });
+ await setupWebsiteBuilder(`
b
`);
+ await contains(":iframe .test-options-target").click();
+ await contains(".we-bg-options-container button").click();
+ // The function `apply` should be called twice (on hover (for preview), then, on click).
+ expect.verifySteps(["customAction myParam myValue", "customAction myParam myValue"]);
+});