Scoped semantic HTML

Importing Markup Refine does not globally restyle ordinary host markup. Add data-mr to the document or subtree that should receive the semantic reset and native-element styling.

<section data-mr>
  <h2>Refined island</h2>
  <button>Refined button</button>
</section>

Host and refined island side by side

Host HTML

This section has no semantic Markup Refine scope.

Markup Refine island

The same native elements are refined inside this boundary.

Opt out and re-enter

data-mr-unstyled stops the semantic scope for one element or an entire subtree. A nested data-mr scope explicitly opts back in.

<section data-mr>
  <button>Refined</button>

  <div data-mr-unstyled>
    <button>Host/native styles</button>

    <section data-mr>
      <button>Refined again</button>
    </section>
  </div>
</section>

Per-island themes

Tokens inherit normally, so separate islands can override --mr-*values independently without selector duplication.

.billing-admin {
  --mr-color-primary: hsl(215 70% 42%);
}

.reporting-admin {
  --mr-color-primary: hsl(145 55% 35%);
}

Browser requirement

The semantic boundary uses native CSS @scope. Markup Refine does not ship an old-browser scoping polyfill.

MarkupRefineLib