Web-components: Fix CSS class usage in CLI template

[wesleyboar]

Issue: Styles were not being applied to an element using attribute className.

What I did

Change .js file's lit-html markup to use class attribute instead of className.

How to test

• Is this testable with Jest or Chromatic screenshots?
• Does this need a new example in the kitchen sink apps?
• Does this need an update to the documentation? — Maybe.

If your answer is yes to any of these, please make sure to include it in your PR.

No "Jest or Chromatic screenshots". I tried. Storybook I failed: #17703

Edit: I found Chromatic runs automatically. It is recorded as having passed, and though I agree, I think it is a broken test.¹

Update: I was ignorant of the complexity and feature set of the Storybook pipelines. See #17702 (comment).

Footnotes

1. I found the relevant test suite ("regression-test-webcomponents"). The relevant stories ("Example" > "Page") do not reflect my change. I see classname is still used, and styles are still not applied. I don't understand the purpose of this automation. ↩

[nx-cloud]

☁️ Nx Cloud Report

CI is running/has finished running commands for commit f1d39bc. As they complete they will appear below. Click to see the status, the terminal output, and the build insights.

📂 See all runs for this branch

---

✅ Successfully ran 1 target

• nx run-many --target=prepare --all --parallel --max-parallel=15 -- --optimized

---

Sent with 💌 from NxCloud.

[wesleyboar]

I see two failures for automated testing. I do not claim responsibility for those failures.

• "ci/circleci" Details
  • Mentions Vue and ID attribute, neither of which does my code appear to influence.
• "test" Details
  • Is inaccessible to me. I have no login.

[yannbf]

Hey @tacc-wbomar thanks for your contribution!

Sorry about the pipeline failures, we are facing an issue with E2E tests with pnp for Vue and React, and that is not related to your changes. Thanks for checking!

[yannbf]

I found the relevant test suite ("regression-test-webcomponents"). The relevant stories ("Example" > "Page") do not reflect my change. I see classname is still used, and styles are still not applied. I don't understand the purpose of this automation. ↩

The change you made is related to CLI templates used to bootstrap new projects. In Chromatic we use the kitchen sink app which is not related to the change you made, hence it didn't introduce changes. It's all good!

[wesleyboar]

Thank you.

I've injected "Update: " statements into this PR desc and my issue that will clarify my inaccuracy to others and point to your comments as resolutions.