← Back to Components

Page Frame Web Component

A lightweight web component that renders HTML content within a configurable frame.

Overview

The qds-page-frame component creates a container with configurable dimensions for displaying HTML content. It provides a simple way to embed and render HTML strings within a page with controlled dimensions.

Features

• Render HTML content within a controlled container
• Set custom width and height
• Basic HTML safety escaping

Usage

<qds-page-frame 
  html-content="<p>Your HTML content here</p>"
  width="800px"
  height="600px">
</qds-page-frame>

Installation

Include the component in your project:

<script src="https://cdn.q360.ai/assets/components/page-frame/qds-page-frame.js" type="module"></script>

Or import it in your JavaScript:

import "https://cdn.q360.ai/assets/components/page-frame/qds-page-frame.js";

You can also load all components at once:

<script src="https://cdn.q360.ai/assets/components/index.js" type="module"></script>

Attributes

Attribute	Type	Description	Default
html-content	String	HTML content to display	Empty HTML template
width	String	Width of the frame (CSS value)	“1024px”
height	String	Height of the frame (CSS value)	“100%”

Properties

The component also exposes the following JavaScript properties:

• htmlContent: Get or set the HTML content
• width: Get or set the width
• height: Get or set the height

Example:

const pageFrame = document.querySelector('qds-page-frame');
pageFrame.htmlContent = '<p>New content</p>';
pageFrame.width = '500px';

Styling

The component can be styled through its attributes or by targeting the host element:

qds-page-frame {
  max-width: 800px;
  width: 800px;
}

Notes

• The component uses Shadow DOM for encapsulation
• Basic HTML escaping is implemented, but commented out in current version
• Default content is an empty HTML template

Browser Support

This component uses standard Web Component APIs and works in all modern browsers that support Custom Elements v1.