bug/issue 128 fix shadow root rendering for JSX

[thescientist13]

Related Issue

resolves #128

Summary of Changes

1. Wrap JSX that renders into a shadow DOM with a <template> tag
2. Fix issues with inferredObservability interop
3. Added a test case (there was never one to begin with 😱 )
4. All sandbox demos are working as expected now 🎉
5. Updated documentation, examples, and caveats for JSX support

See thescientist13/greenwood-htmx#10 for a working example

TODO

1. JSX + Shadow DOM testing - see browser warning about "declarative Shadow DOM has not been enabled by includeShadowRoots" #130
   • so yeah, the current implementation is not going to work, if use shadowRoot.innerHTML we're still going to keep getting runtime warnings
     
2. Greenwood regression testing
3. more test cases, like for inferredObservability
4. documentation
   • hard dependency on constructor (does it have to be though?) - nope!
   • hard dependency on

     connectedCallback() {
       this.render();
     }

   • inline <style> tag in JSX not supported - https://stackoverflow.com/questions/27530462/tag-error-react-jsx-style-tag-error-on-render
   • attachShadow is needed as a hint for DSD
5. reuse HTMLTemplateElement (e.g. DOM shim) instead of manually wrapping - N / A
6. refactor DSD render function implementation to avoid innerHTML usage (nice to have, otherwise could be a good first issue) - made its own issue, but of lower priority if we can get Fine Grained Inferred Observability for JSX #108 working (since renders would only happen once) - optimize how initial HTML is set on initial render for JSX usage #138

[thescientist13]

This could use this.greeting instead of hardcode world