Layout Shadow DOM mode

By default, in Advanced Views, every Layout's JavaScript is turned into a classic Web Component. In this mode, the component behaves like a regular HTML element, meaning global CSS rules—such as p { color: blue; }—can affect its internal markup.

To isolate your component from the rest of the page, you can enable the Shadow DOM option. This uses the native Shadow DOM feature of Web Components to encapsulate the component's markup and styles. As a result, global CSS no longer affects the component's internal elements, and only the Layout's CSS is applied.

Think of it as rendering your Layout on a clean canvas, free from the surrounding page's styles.

1. How to enable Layout Shadow DOM

• Create a new Layout or open an existing one

• On the Layout edit screen, switch to the Options tab.

• Choose one of the Shadow DOM options (compared in the section below)

• Click on the Update button to publish your changes.

Note: when Shadow DOM is enabled, your JavaScript must query elements through the component's shadow root instead of the component itself. Therefore, don't forget to replace all this usages with this.shadowRoot

2. Use cases of Shadow DOM

Shadow DOM is especially useful when integrating a Layout into an existing website with unpredictable or poorly scoped CSS.

On well-structured websites that follow a modular CSS approach, the default Classic mode is often sufficient. However, many legacy sites contain extensive global styles that unintentionally affect new components.

Without Shadow DOM, you may need to spend considerable time overriding those styles. Even styling something as simple as a <ul> can become frustrating due to inherited rules and CSS specificity.

With Shadow DOM enabled, those global styles are isolated from your component, eliminating the need for most overrides and making your Layout much easier to develop and maintain.

3. Types of Shadow DOM

There are two ways to create a Shadow DOM:

1. Declarative Shadow DOM (using a <template> element)

2. Imperative Shadow DOM (created with JavaScript)

Advanced Views supports both approaches. Although they both provide style and markup encapsulation, they differ in browser support, rendering behavior, and use cases.

The comparison table below will help you choose the most suitable option:

Type	Description	Best use cases	Limitations
Declarative Shadow DOM	Made using the <template> tag, which is added on the server side. The element will be rendered before the JavaScript is loaded.	Layouts that are available on the page since loading.	Parsed only once, on page load. This means elements with this option can't be added later, e.g., via AJAX (like Layout inside the "Load More" of Post Selection).
Imperative Shadow DOM	Made using the attachShadow method call. The element will be rendered as plain HTML and turned into a Shadow DOM on the client side when JavaScript is loaded.	Layouts selected for Post Selections with the pagination feature active. Any Layouts added to the page after it has been loaded.	May cause minor layout shifts or visual differences during loading: All the page styles are applied to the element before JavaScript is loaded and are disabled only after JavaScript is loaded.

4. Global styles workaround

E.g. Tailwind styles are dynamically merged on the page level to avoid class duplication. This means that by default, they won't be included inside elements with the WebComponent Shadow type. However, you can use a workaround to achieve the same experience.

Let's review the following case: we have a page and need to add four elements styled with Tailwind. Meanwhile, we need to avoid Tailwind styles appearing at the page level (the default behavior). To achieve this, we can wrap our elements in a Layout and define a special comment, which will instruct Advanced Views to place the page styles there. See the example below:

<my-page>
    <template shadowrootmode="open">
        <!--advanced-views:styles/custom-location-->
        <div>
            <div class="flex flex-col font-lato">
                [avf-layout name="One block" id="669137a4e4654"]
                [avf-layout name="Another block" id="669138190e3ca"]
            </div>
        </div>
    </template>
</my-page>

In this case, we can use Tailwind for any elements, Layouts inside this element, and Tailwind CSS styles won't appear at the page level.

Tip: You may need to insert a third-party element between the elements. For example, some form that is already styled by the theme or plugin and needs to be available for JavaScript globally. For this case, you can use the Slots feature, as shown in the example below:

<my-page>
    <template shadowrootmode="open">
        <!--advanced-views:styles/custom-location-->
        <div>
            <div class="flex flex-col font-lato">
                [avf-layouts name="One block" vid="669137a4e4654"]
                <slot name="ninja-form"></slot>
                [avf-layouts name="Another block" id="669138190e3ca"]
            </div>
        </div>
    </template>
    <div slot="ninja-form">[ninja_form id=1]</div>
</my-page>

In this case, the content inside the slot will be inserted between the elements but will remain at the page level, making it available for any global CSS and JavaScript.