Fore Component wraps a Fore page in a Web Component

With fore-component you can wrap a complete and standalone HTML page containing an arbitrarily complex Fore section and put it into shadowDOM.

Fore Component is completely generic - you don't need to wrap each of your pages individually but instead just pass the link to the HTML page. Fore Component will then import the fx-fore element from that page.

As this encapsulates the pages you need a way to inject CSS into their shadowDOM. By passing the respective link elements as children you can import those into the rendered page.

constructable CSSStylesSheets are new and need to be polyfilled on some browsers like Safari. If you inspect this page you find the polyfill import in the head section.

This page shows two separate Fore pages (clock and todo) assembled in one page.

Though properly isolated from each other and each using it's own CSS they still can communicate via global events. The clock emits a 'clock' event which passes on the time. The todo page will listen for that and display the time in its own shadowDOM. Note the time displayed in blue.

Greetings to all my babies! {event('time')}

Unfortunately the demo-snippet component does not handle Fore Component correcty so the source cannot be shown here directly. This is not a bug in the implementation but a limitation in demo-snippet. You can find the source at Github