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

CSS
    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.
JS
    1. Checkboxes on page should not be affected by embed-page content.
    2. Operating the page content here should not affect the component` intestines.
Links
    1. Click on link will replace the component content with page from href attribute.
Form
    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.