Use slots instead of pure shadow DOM

[danielgamage]

Moved inner content on the web component to a <slot> element to make cascade behavior more useful. This was good to update, too, because content updates inside the ragger component via JS weren't propagating to the shadow root before this.

It would be good to

• test the computed style on a slotted element to see if it inherits from global styles for inheriting other styles #16, but jsdom doesn't return anything from getComputedStyle beside visibility (added a failing test for this)
• test the shadowRoot's text content after running something like mechanicalragger.innerHTML = "b", too, but mechanicalragger.shadowRoot.textContent, which works fine in the browser, also returns nothing in jsdom. (added a failing test for this)

Would be a lot for this project, but maybe we can try headless chrome / Puppeteer / selenium for these tests?

#16

[mikabusante]

I wonder if this package would be useful https://open-wc.org/docs/testing/testing-package/... but if we are trying to test inherited styles, I think we will have to test that in the browser. To do that we would need to:

• add a basic test page with the web component
• add a style sheet
• config some basic web server and run that during the tests

Then we could def test the text content + styles. Not 100% sure if we can do something like mechanicalragger.innerHTML = "b" directly in the test body (I just haven't seen an example that does that, ig because it doesn't mimic user behavior), but we could have that innerHTML change happen on a button click or something, and then check that the text content has changed?

[danielgamage]

one other Q: Do you think storybook would be a useful test environment for this?

Asking bc our current demo site doesn't really cover all of the features like writing-modes, text alignment, ragging-width, resizing, and style inheritance (now), so I'm wondering if storybook would be an easier way of showcasing all of those things with minimal test cases and getting them in CI at the same time.

[mikabusante]

oooo yes! I think that's a great idea :)

[danielgamage]

since the tests are in #21 and #22, i'm going to remove the tests from here and merge+release this to resolve #16. then we can take some time to figure out a good test + demo setup