<dy-compartment>

A component that creates an isolated styling context, preventing external styles from affecting its internal elements. This is particularly useful when embedding third-party content or creating isolated UI components.

Example

const style = css`
  * {
    color: red;
  }
`;

html`
  <dy-compartment
    .styles=${style}
    .content=${html`<div>test</div>`}
  ></dy-compartment>
`;

<dy-compartment> API

DuoyunCompartmentElement

Extends TapCompartmentElement

TapCompartmentElement

Shadow DOM; Extends GemUnsafeElement

TapCompartmentElement Instance Properties

Property(Attribute) Reactive Type
content Yes string | number | TemplateResult | Element | Element[]