Clarity: core: embedded front end examples

[coryrylan]

Summary

Create a demo app that shows how to embed two different component trees or apps can be used within the same host app sharing core as a external peer dep. Example App:

Host app built with Angular

• Feature 1
  vue component wrapped as custom element
• Feature 2
  svelte component wrapped as custom element

Both feature 1 and 2 use Clarity Core as a peer dependency. This example demonstrates that Core can be used cross framework and be shared as a peer dep between embedded apps. Each app should also extend a Core component with a aliased tag and style it to also demonstrate isolated styles between embeds.

<!-- host app (Angular) -->
<section>
  <feat1-embed></feat1-embed>
  <feat2-embed></feat2-embed>
</section>

<!-- feat 1 template (Vue) -->
<style>
  feat1-button {
    --background: green;
  }
</style>
<feat1-button>aliased cwc-button</feat1-button>

<!-- feat 2 template (Svelte) -->
<style>
  feat2-button {
    --background: orange;
  }
</style>
<feat2-button>aliased cwc-button</feat2-button>

[mathisscott]

Sure would be more fun to use Elm instead of Svelte...

[coryrylan]

Make a host app with elm and then two features one with Angular Elements and another with Vue wrapped Custom Elements. Both using Core :)