Plastic Bag

Plastic Bag is a Custom Element that uses different strategies to load Frontend applications/components.

Installation

Package

npm install plastic-bag

Registering the Custom Element plastic-bag:

import 'plastic-bag';
// or
require('plastic-bag');

CDN

<script src="https://unpkg.com/plastic-bag/dist/index.js" />

Examples

<plastic-bag type="script" src="/app.js">
    <div id="app-example">Loading...</div>
</plastic-bag>

<plastic-bag type="html-fragment" src="/header.html">
</plastic-bag>

Options

src

URI of the resource that will be loaded.

type

Each type uses a different strategy to load the application source. Default value: "script".

• "script": fetchs and execute src.
• "iframe": uses iframe to display src.
• "html-fragment": fetchs src, puts its content inside plastic-bag and executes script tags if present.

Content

The content will be displayed as soon the tag is attatched.

Compatibility

We are working on browser compatibility tests with BrowserStack.