Isolate

isolate is a Boolean attribute and can receive the following values:

<@Counter isolate />
<@Counter isolate="true" />
<@Counter isolate="false" />
<@Counter isolate={{isolated}} />

The value-less attribute is equivalent to true. You can also receive static values "true" and "false" or an expression of Go that produces a boolean value.

When its value is true, GOX mounts the Client component into a Shadow DOM to isolate its inner tree, its interface logic and its styles from the rest of the page. false or the attribute is omitted, the component is mounted without isolation.

GOX automatically prepares the necessary environment. isolate does not require changing the structure, properties, status, events and styles of the component.

Shadow DOM

Shadow DOM creates an internal tree separate from the main tree of the document.

When isolate is active, GOX uses that tree as the root of the Client component:

gox-isle
└── shadowRoot
    └── componente Client

The framework mounts, updates and disassembles the component within that root. The separation protects its internal structure against accidental selectors and manipulations carried out from the document.

The Shadow DOM also limits the scope of the styles. The general selectors of the page do not normally cross their limit, so they do not directly modify the internal elements of the component.

Isolated logic

The component manages its interface within its own assembly point.

Their status, events and updates continue to work as usual:

<@Counter isolate />

The framework controls the internal structure of Counter within the Shadow DOM. The consultations and manipulations normally carried out on the document do not accidentally reach its internal elements.

This allows different components to use identifiers, selectors or similar structures without sharing the same internal tree.

isolate does not convert the component into a JavaScript sandbox. The component can still deliberately access the document, browser APIs and other global resources.

Isolated styles

GOX automatically loads into the Shadow DOM the styles imported by the component.

The component and its styles are written in the usual way. It is not necessary to use special selectors or to maintain a different version to activate the insulation.

For example, a general rule of the page:

button {
    color: red;
}

does not directly modify a button located within the Shadow DOM of Counter.

The styles imported by the component also remain available in the document. This allows the content generated initially by the server to keep the same appearance before the Client component is mounted.

See the documentation for Hydrate to know how GOX controls the moment the Client component replaces the content generated by the server.

Advertencia:isolate protects the component of external styles, but does not completely prevent their own styles from affecting other elements of the page. It uses specific classes and prevents unnecessary global selectors.

GOX controls the element internally gox-isle that acts as host of Shadow DOM. No modification is recommended :host unless you understand how the change will affect the external presentation of the component.

Transparent development

The same component can be used with or without isolation:

<@Counter />
<@Counter isolate />

There is no need to change:

• The statement of the Client component.
• Their properties.
• Its internal structure.
• The administration of your state.
• Your event controllers.
• Their imported styles.

The difference is found in the place where GOX rides it. isolatethe component participates in the normal tree of the document. isolate, its interface is administered within a Shadow DOM.

The system is designed to enable the isolation to not produce visual differences or require additional development rules.

See the documentation for Components to learn how to integrate client components into reusable GOX components.

Performance without isolate

When isolate is omitted or its value is false, GOX mounts the component without creating a Shadow DOM:

<@Counter />
<@Counter isolate="false" />

In this case, the general styles of the page can reach its internal elements and consultations on the document can directly access its structure.

This behavior is appropriate when the component must be fully integrated with the styles and overall structure of the application.

When to use isolate

isolate is useful when a component:

• It needs to protect its internal structure from external manipulation.
• You must keep your appearance in front of the general styles of the page.
• It can be used in pages with different visual structures or systems.
• It uses identifiers, selectors or classes that could match other elements.
• It comes from a separate library or component system.

It may be omitted when the component should participate directly in the overall structure and styles of the application.

Best practices

• Use isolate when the component needs to independently control its internal structure and appearance.
• He prefers the value-less attribute when the isolation should always be active.
• It uses a Boolean expression when isolation depends on a condition.
• It retains the same implementation of the component with and without isolation.
• It uses specific classes and avoids global selectors in its styles.
• Do not use isolate as a security mechanism or JavaScript sandbox.
• Do not modify :host unless you need to deliberately control the outer element.

See also

• Hydrate
• Components