Non-JS Sources

[bennypowers]

Consider:

<!-- index.html -->
<!-- head, etc... -->

    <define-element name="app-card">
      <template>
        <link rel="stylesheet" href="/app-card.css"/>
        <article>
          <header part="heading"><slot name="heading"></slot></header>
          <div id="content" part="content"><slot></slot></div>
          <footer part="actions"><slot name="actions"></slot></footer>
        </article>
      </template>
    </define-element>

/* /app-card.css */
:host {
  display: flex;
  flex-flow: column nowrap;
  position: relative;
  background: white;
  box-shadow: var(--app-card-shadow);
  border: var(--app-card-border);
  border-radius: var(--app-card-border-radius);
}

It would be truly awesome if I could mark these up with comments in HTML source and have WCA spit out docs for them. That would really help future me when maintaining projects that use these kinds of quick css-only components.

---

I get a tremendous amount of utility out of this project. Thank you very much for publishing and maintaining it.

[juliexiong]

Piggybacking off of this, it would also be beneficial to be able to document CSS classes that modify custom elements. I prefer to use classes versus attributes when modifications are purely style-based and not functional. For example, I have an info well, error well, and warning well. The only differences between them are the color themes. I do not want to add an attribute for "info", "error", and "warning". CSS classes are sufficient.

<well info>Did you know you can download this in PDF or Microsoft Word format?</well>

versus

<well class="info">Did you know you can download this in PDF or Microsoft Word format?</well>