npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@mariohamann/include-iframe

v1.0.3

Published

- [include-iframe](#include-iframe) - [Main Features](#main-features) - [Installation](#installation) - [CDN](#cdn) - [NPM](#npm) - [Usage](#usage) - [Basic Usage](#basic-usage) - [Attributes: `query-head` and `query-body`](#attribut

Downloads

90

Vulnerabilities

Powered byPowered by Snyk
  • 0High
  • 0Medium
  • 0Low

Links

Maintainers

mariohamannmariohamann

Keywords

Readme

include-iframe

The <include-iframe> custom element is a simple way to load content from external HTML files. It injects the content of a slotted <iframe> element and replaces itself and the iframe afterwards. It supports showing a loading state while the iframe content is being loaded. Besides being a way for "Client Side Includes", this can be used as a primitive way to offload performance heavy or dynamic content, as e. g. Astro does it with Server Islands.

Main Features

  • 🚀 Easy content loading from external HTML files
  • 🏎️ Utilizes LightDOM for best performance
  • ⏳ Customizable loading state
  • 🌐 Optimized for Progressive Enhancement

Installation

CDN

<script
	type="module"
	src="https://cdn.jsdelivr.net/npm/@mariohamann/include-iframe/dist/include-iframe.min.js"
></script>
<include-iframe>
	<iframe src="path/to/your-include"></iframe>
	<div slot="loading" hidden>Loading...</div>
</include-iframe>

NPM

npm install @mariohamann/include-iframe
import "@mariohamann/include-iframe";
<include-iframe>
	<iframe src="path/to/your-include"></iframe>
	<div slot="loading" hidden>Loading...</div>
</include-iframe>

Usage

Basic Usage

Use the default slot to include an iframe with the content you want to load. The component will extract the content from the iframe, remove itself and append the content to the parent element.

<include-iframe>
	<iframe src="path/to/your-include"></iframe>
</include-iframe>

Using the native iframe element in the LightDOM allows the browser to start loading the content immediately, even before JavaScript is executed. This ensures optimal performance and in addition enables features like Lazy Loading by setting loading="lazy" on the iframe. And even when JavaScript is disabled, the content of your iframe will be shown.

[!TIP] For improved Progressive Enhancement, include the following CSS, which will hide the iframe when JavaScript is enabled.

@media (scripting: enabled) {
	include-iframe iframe {
		clip: rect(0 0 0 0);
		clip-path: inset(50%);
		height: 1px;
		overflow: hidden;
		position: absolute;
		white-space: nowrap;
		width: 1px;
	}
}

Attributes: query-head and query-body

Defaults:

  • query-head: ''
  • query-body: 'body > *'.

Use query-head and query-body to include specific elements from the source. Elements from query-head are appended to the document's '<head>', while elements from query-body replace the web component itself.

This allows, for example, to include <style> to your main document or to omit certain elements. The following example would add the <style>to the main <head> and replace the web component with<p id="include">This will be included.</p>.

<include-iframe query-body="body > #include" query-head="style">
	<iframe src="/query/demo.html"></iframe>
</include-iframe>
<head>
	<style>
		#include {
			border-left: 4px solid #333;
			padding-left: 1em;
		}
	</style>
</head>
<body>
	<p id="avoid">This won't be included</p>
	<p id="include">This will be included.</p>
</body>

Slot: loading

Use the loading slot to display a custom loading state while the iframe content is being loaded.

<include-iframe>
	<iframe src="path/to/your-include"></iframe>
	<div slot="loading" hidden>Loading...</div>
</include-iframe>

[!TIP] For improved Progressive Enhancement, set the hidden attribute on the loading slot element. It will be removed by the web component, when JavaScript is enabled.

Limitations

  • The included content must be served from the same origin as the parent document. This is a security feature of the web platform.
  • You can nest iframes with <include-iframe> into each other. Be aware, that this could lead to performance issues, as each iframe will load its content separately. Especially be aware of recursive includes.
  • It could lead to problems if you include scripts and DOM manipulations in the included content. The include works best with static content. Check out the examples in /public to see best practices.

Inspiration