Basic embed-page demo, Embeddable Progressive Applications Working Group

The <embed-page/> web component is acting as IFRAME. Its content is insulated on JS, DOM, CSS and browsing context level( A links and FORM get/post ).

Unlike IFRAME it is embedded inline into parent page DOM and automatically resizing parent node.

page-purple.html as <embed-page> in IFRAME View source
page-violet.html as <embed-page>


in IFRAME View source

Demo(this) page

Default style header

The content this section, page-violet.html, page-purple.html is identical.
Scripts and CSS rules are operating with same IDs and class names.
  • UNchecked by default.
  • checked by page.js

Visual demo

    1. The header above should be intact(default) in color and text size.
    2. Colors in demo components and IFRAMEs should match the page name: purple, violet.
    1. Checkboxes on page should not be affected by embed-page content.
    2. Operating the page content here should not affect the component` intestines.
    1. Click on link will replace the component content with page from href attribute.
    1. GET and POST will replace content according to FORM action attribute.
page.js When used from embed-page, the document is wrapped to reflect component instance scope.
The click will trigger just own instance checkbox.