Iframe

An iframe wrapper for embedded tools, remote documents and external content inside Monster layouts.

Import

import { Iframe } from "@schukai/monster/source/components/layout/iframe.mjs";

Source

View source code

Package

@schukai/monster

Since

3.76.0

Embedded support view

Use the iframe when a second document should stay inside the current workspace.

Introduction

The Monster Iframe component embeds external pages or tools inside a Monster layout. Use it when remote content must stay inside the surrounding interface instead of opening in a new tab or replacing the current route.

When to use Iframe

Use it for embedded tools and previews: Documentation previews, third-party admin tools and remote forms are common cases.
Use it when the host application still provides the frame: Toolbars, context and navigation can remain around the remote content.
Do not use it when direct integration is possible: Native integration usually provides better control and accessibility.

Typical mistakes

Treat iframe content as a separate runtime. Sizing, loading behavior and cross-origin limits should be explicit, otherwise the embedded surface feels brittle.

Simple Iframe

A basic iframe embedding an internal documentation page. The component adjusts its height to the available space and supports standard iframe options.

Javascript

import '@schukai/monster/source/components/layout/iframe.mjs';

const iframe = document.createElement('monster-iframe');

iframe.setOption('src', '/foundations.typography.html');
iframe.setOption('loading', 'lazy');

document.getElementById('iframe-simple')?.appendChild(iframe);<script type="module">import '@schukai/monster/source/components/layout/iframe.mjs';

const iframe = document.createElement('monster-iframe');

iframe.setOption('src', '/foundations.typography.html');
iframe.setOption('loading', 'lazy');

document.getElementById('iframe-simple').appendChild(iframe);</script>

HTML

<section style="display:grid;gap:var(--monster-space-4);block-size:24rem;min-block-size:24rem;">
  <div style="display:grid;gap:var(--monster-space-2);padding:var(--monster-space-4);background:var(--monster-bg-color-primary-2);color:var(--monster-color-primary-2);border:1px solid var(--monster-color-border-primary-2);">
    <strong>Embedded documentation</strong>
    <p style="margin:0;">
      Use the iframe component when a secondary document or tool should stay inside
      the current page shell.
    </p>
  </div>
  <div id="iframe-simple"></div>
</section>

Stylesheet

/** no additional stylesheet is defined **/

Open in playground

Iframe With Toolbar

This example changes the iframe source from an outer toolbar. It is a practical pattern for embedded help, docs, or support panels.

Support view

Javascript

import "@schukai/monster/source/components/layout/iframe.mjs";

const container = document.getElementById("iframe-toolbar-demo");
const log = document.getElementById("iframe-toolbar-log");
const iframe = document.createElement("monster-iframe");

iframe.setOption("src", "/foundations.typography.html");
iframe.setOption("loading", "lazy");

container?.appendChild(iframe);

document
	.getElementById("iframe-toolbar-load-typography")
	?.addEventListener("click", () => {
		iframe.setOption("src", "/foundations.typography.html");
		log.textContent = "Current source: typography";
	});

document
	.getElementById("iframe-toolbar-load-color")
	?.addEventListener("click", () => {
		iframe.setOption("src", "/foundations.color.html");
		log.textContent = "Current source: color";
	});

HTML

<section style="display:grid;gap:var(--monster-space-4);block-size:26rem;min-block-size:26rem;">
  <div style="display:flex;gap:var(--monster-space-3);flex-wrap:wrap;align-items:center;padding:var(--monster-space-4);background:var(--monster-bg-color-secondary-2);color:var(--monster-color-secondary-2);border:1px solid var(--monster-color-border-secondary-2);">
    <strong>Support view</strong>
    <button id="iframe-toolbar-load-typography" type="button">Load typography</button>
    <button id="iframe-toolbar-load-color" type="button">Load color</button>
    <span id="iframe-toolbar-log">Current source: typography</span>
  </div>
  <div id="iframe-toolbar-demo"></div>
</section>

Stylesheet

/** no additional stylesheet is defined **/

Open in playground

Component Design

The iframe is rendered inside a Shadow DOM wrapper for consistent styling. The exported part allows customization of the outer container.

Exported Parts

control: Wrapper around the iframe element.


monster-iframe::part(control) {
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    overflow: hidden;
}

HTML Structure

<monster-iframe></monster-iframe>

JavaScript Initialization

const element = document.createElement('monster-iframe');
document.body.appendChild(element);

Exported

Iframe

Derived from

CustomElement

Options

The Options listed in this section are defined directly within the class. This class is derived from several parent classes, including the CustomElement class. Therefore, it inherits Options from these parent classes. If you cannot find a specific Options in this list, we recommend consulting the documentation of the CustomElement.

Option

Type

Default

Description

templates

object

Template definitions

templates.main

string

undefined

Main template

labels

object

undefined

Label definitions

actions

object

Callbacks

actions.click

string

throw Error

features

object

Features

features.allowFullScreen

boolean

true

features.allowPaymentRequest

boolean

true

features.replaceTargets

boolean

true

string

eager

referrerPolicy

string

no-referrer

src

string

Source

classes

object

undefined

CSS classes

disabled

boolean

false

since
deprecated

Properties and Attributes

The Properties and Attributes listed in this section are defined directly within the class. This class is derived from several parent classes, including the CustomElement class and ultimately from HTMLElement. Therefore, it inherits Properties and Attributes from these parent classes. If you cannot find a specific Properties and Attributes in this list, we recommend consulting the documentation of the CustomElement.

data-monster-options: Sets the configuration options for the collapse component when used as an HTML attribute.
data-monster-option-[name]: Sets the value of the configuration option [name] for the collapse component when used as an HTML attribute.

Methods

The methods listed in this section are defined directly within the class. This class is derived from several parent classes, including the CustomElement class and ultimately from HTMLElement. Therefore, it inherits methods from these parent classes. If you cannot find a specific method in this list, we recommend consulting the documentation of the CustomElement.

Static methods

[instanceSymbol]()

Returns

{symbol}

This method is called by the instanceof operator.

getCSSStyleSheet()

Returns

{CSSStyleSheet[]}

getTag()

Returns

{string}

Lifecycle methods

Lifecycle methods are called by the environment and are usually not intended to be called directly.

[assembleMethodSymbol]()

Returns

{Components.Layout.Iframe

Events

monster-iframe-clicked

connectedCallback()

Returns

{void}

This method is called by the dom and should not be called directly.

disconnectedCallback()

Returns

{void}

This method is called by the dom and should not be called directly.

Events

The component emits the following events:

monster-iframe-clicked

For more information on how to handle events, see the mdn documentation.

The current width of the area is too small to display the content correctly.