misc clean and docs

Author: thescientist13

docs/pages/docs.md

@@ -348,6 +348,6 @@ And so now when the attribute is set on this component, the component will re-re
 ```
 
 Some notes / limitations:
-- Please be aware of the above linked discussion which is tracking known bugs / feature requests to all things WCC + JSX.
+- Please be aware of the above linked discussion which is tracking known bugs / feature requests / open items related to all things WCC + JSX.
 - We consider the capability of this observability to be "coarse grained" at this time since WCC just re-runs the entire `render` function, replacing of the `innerHTML` for the host component.  Thought it is still WIP, we are exploring a more ["fine grained" approach](https://github.com/ProjectEvergreen/wcc/issues/108) that will more efficient than blowing away all the HTML, a la in the style of [**lit-html**](https://lit.dev/docs/templates/overview/) or [**Solid**'s Signals](https://www.solidjs.com/tutorial/introduction_signals).
 - This automatically _reflects properties used in the `render` function to attributes_, so YMMV.

sandbox/components/card.js

@@ -1,7 +1,7 @@
 export default class Card extends HTMLElement {
 
   selectItem() {
-    alert(`selected item is => ${this.getAttribute('title')}!`);
+    alert(`selected item is => ${this.title}!`);
   }
 
   connectedCallback() {

sandbox/components/card.jsx

@@ -19,7 +19,7 @@ const styles = `
 export default class CardJsx extends HTMLElement {
 
   selectItem() {
-    alert(`selected item is => ${this.getAttribute('title')}!`);
+    alert(`selected item is => ${this.title}!`);
   }
 
   connectedCallback() {

src/jsx-loader.js

@@ -266,8 +266,11 @@ export function parseJsx(moduleURL) {
                   applyDomDepthSubstitutions(elementTree, undefined, hasShadowRoot);
 
                   const serializedHtml = serialize(elementTree);
-                  // could / should we do something else instead of .innerHTML for light DOM?
-                  // https://github.com/ProjectEvergreen/wcc/issues/130
+                  // we have to Shadow DOM use cases here
+                  // 1. No shadowRoot, so we attachShadow and append the template
+                  // 2. If there is root from the attachShadow signal, so we just need to inject innerHTML, say in an htmx
+                  // could / should we do something else instead of .innerHTML
+                  // https://github.com/ProjectEvergreen/wcc/issues/138
                   const renderHandler = hasShadowRoot
                     ? `
                         const template = document.createElement('template');

test/cases/jsx-shadow-dom/src/heading.jsx

@@ -1,6 +1,6 @@
 export default class HeadingComponent extends HTMLElement {
   sayHello() {
-    alert('hello world!');
+    alert(`Hello, ${this.greeting}!`);
   }
 
   connectedCallback() {