Is there a way to document methods and their arguments in a consistent fashion?

I would like to add some example styles customised using Shadow Parts exposed by my element.

So far I failed to do that. I cannot add a style to the document itself because API viewer's shadow root blocks them. I tried to put them inside the template[data-target=host] but that break the demo completely.

How about providing a new template where a style can be provided?

<api-viewer>
  <template data-element="my-element" data-target="style">
    <style>
      my-element::part(foo) { color: red }
    </style>
  </template>
</api-viewer>

Before I start the work to add this feature, I wanted to see if this is something this project would even want to support. We're using this component to render our documentation for API-driven web components, and as our documentation site doesn't have access to our APIs, we'd like to remove the demo entirely.

Thinking something as easy as <api-viewer no-demo src="./custom-element.json"></api-viewer>.

I have multiple CSS props with similar naming conventions, which can easily become overwhelming and confusing. I want to further define their modification purposes:

/**
* @cssprop {BackgroundColor} [--card-background-color=white] - Background color of card
* @cssprop {Color} [--card-color=black] - Text/icon color in a card
* @cssprop {BorderColor} [--card-border-color=hotpink] - Border color of card
**/

There was a similar issue for this in web-component-analyzer and a PR that addressed it as a typehint.

It turns out highlight-ts is a lot smaller when illuminate-js.
So it would be better to use it in order to reduce bundle size.

currently, knobs are stored alongside the manifest format for each member.

Ideally, knobs should have their own unique data format and reference their associated members by name and type.

knob state and configuration should also be managed outside of the UI components, perhaps in a reactive controller or some such

In my case <api-viewer> is being rendered into the site, but it displays the following:

What does the json file has to look like, so that custom elements are found inside it? Currently it looks like this:

{
  "schemaVersion": "1.0.0",
  "readme": "",
  "modules": [
    {
      "kind": "javascript-module",
      "path": "src/components/my-button.ts",
      "declarations": [
        {
          "kind": "class",
          "description": "",
          "name": "MyButton",
          "members": [
            {
              "kind": "field",
              "name": "theme",
              "type": {
                "text": "string"
              },
              "default": "''",
              "attribute": "theme"
            },
            {
              "kind": "field",
              "name": "isDisabled",
              "type": {
                "text": "boolean"
              },
              "default": "false",
              "attribute": "disabled"
            },
            {
              "kind": "field",
              "name": "isLoading",
              "type": {
                "text": "boolean"
              },
              "default": "false",
              "attribute": "loading"
            },
            {
              "kind": "method",
              "name": "handler",
              "privacy": "private",
              "parameters": [
                {
                  "name": "e",
                  "type": {
                    "text": "Event"
                  }
                }
              ]
            }
          ],
          "attributes": [
            {
              "name": "theme",
              "type": {
                "text": "string"
              },
              "default": "''",
              "fieldName": "theme"
            },
            {
              "name": "disabled",
              "type": {
                "text": "boolean"
              },
              "default": "false",
              "fieldName": "isDisabled"
            },
            {
              "name": "loading",
              "type": {
                "text": "boolean"
              },
              "default": "false",
              "fieldName": "isLoading"
            }
          ],
          "superclass": {
            "name": "LitElement",
            "package": "lit"
          },
          "customElement": true
        }
      ],
      "exports": [
        {
          "kind": "js",
          "name": "MyButton",
          "declaration": {
            "name": "MyButton",
            "module": "src/components/my-button.ts"
          }
        }
      ]
    }
  ]
}

Error when importing and viewing in the browser:

Error compiling: Could not resolve import "marked/lib/marked.esm.js" in "./node_modules/api-viewer-element/lib/lib/markdown.js".

It seems that there is only the marked.js

api-demo's template syntax requires a special HTML syntax.

At the moment, Custom elements manifest and associated tooling has achieved a measure of maturity which it did not have when api-demo was originally factored.

The purpose of this issue to discuss the possibility of deriving demo knobs from plain HTML. The goal is that users would be able to write demo markup which exactly corresponds to final markup, without special template tags.

We would like to re-adopt api-viewer for patternfly elements and red hat design system, but we require the demo source files to be plain HTML, including imports and global css. example demo file

given

{
  "schemaVersion": "1.0.0",
  "readme": "",
  "modules": [
    {
      "kind": "javascript-module",
      "path": "rh-jazz-hands.js",
      "declarations": [
        {
          "kind": "class",
          "description": "Jazz Hands",
          "name": "RhJazzHands",
          "slots": [
            {
              "description": "Place element content here",
              "name": ""
            }
          ],
          "members": [
            {
              "kind": "field",
              "name": "version",
              "type": {
                "text": "string"
              },
              "static": true,
              "default": "1.0.0",
              "readonly": true
            },
            {
              "kind": "field",
              "name": "type",
              "type": {
                "text": "string"
              }
            }
          ],
          "superclass": {
            "name": "LitElement",
            "package": "lit"
          },
          "tagName": "rh-jazz-hands",
          "customElement": true
        }
      ],
      "exports": [
        {
          "kind": "js",
          "name": "RhJazzHands",
          "declaration": {
            "name": "RhJazzHands",
            "module": "rh-jazz-hands.js"
          }
        },
        {
          "kind": "custom-element-definition",
          "name": "rh-jazz-hands",
          "declaration": {
            "name": "RhJazzHands",
            "module": "rh-jazz-hands.js"
          }
        }
      ]
    }
  ]
}

Expected: in docs view, under 'Properties', version is listed as static

Actual: in docs view, under 'Properties', version is listed just like type

As I'm defining my properties with different types, the api-viewer-element won't recognize the correct type.

For example, I have the following property:

@property({type: Boolean, reflect: true}) invalid: boolean|null|undefined = false;

which is originally a boolean, but also can be null or undefined.
The api-viewer-element though ignores this and just displays an input text field, value false - no checkbox.

What about online playground similar to https://runem.github.io/web-component-analyzer/?

First: thanks for this great repo!
Second:

I created a mono-repo for some webcomponents, like button, input, etc.
Also the repo holds some complex elements based on these single components, like a form element which uses button and input.

The form is populated via an attribute, e.g.

<ui-form inputs='[{"type":"input","label":"Test label"}]'></ui-form>

and the corresponding input fields are generated.

How is it possible to pass attributes to the api-viewer-element? If I use it like this:

<template data-element="ui-form">
    <ui-form inputs='[{"type":"input","label":"Test label"}]'></ui-form>
</template>

the source in the api-viewer-element is shown like this and the ui-form gets rendererd twice:

<ui-form>  
  <ui-form inputs='[{"type":"input","label":"Test label"}]'></ui-form>
</ui-form>

But nothing is displayed... Did I miss something or is this simply not possible?

Hi man,

I'm trying to add default properties to a demo using data-target="host". Unfortunately, it seems to ignore this and falls back to slot. Furthermore, the README mentions both data-targetanddata-type` (none of which works though).

Currently, we rely on prop-drilling to pass state among components.

Ideally, we would use something like the Context API Community Protocol to manage state and avoid prop-drilling. This may be paired with a reactive controller as well.

I have a component with some read-only properties defined as getters.

When I use a template to set up the initial demo state, I get errors about trying to set those read only props.

<script src="https://unpkg.com/shaka-player"></script>
<script src="https://unpkg.com/api-viewer-element?module" type="module"></script>
<script type="module">
  import './shaka-player.js'; //load the component
</script>
<api-viewer src="./custom-elements.json">
  <template data-element="shaka-player" data-target="host">
    <shaka-player controls dash-manifest="http://amssamples.streaming.mediaservices.windows.net/683f7e47-bd83-4427-b0a3-26a6c4547782/BigBuckBunny.ism/manifest(format=mpd-time-csf)"></shaka-player>
  </template>
</api-viewer>

Switching to Demo tab gives:

TypeError: setting getter-only property "duration"

I created a simple button without any style.
But it will get style override by <api-demo>, which is looks like the "copy" button in another section.

The <api-demo> should not affect the component inside.

In certain components we have public properties that don't make any sense in knobs:

• autofocus (only processed once and if set to true by default)
• tabIndex (not a component-specific API that we don't want to highlight)

Proposed syntax:

<api-viewer exclude-knobs="autofocus,tabIndex">

I guess support for lit 2.x components is not available yet? I tried to run the web-component-analyzer on a lit project to create a custom-elements.json file, but it didn't work out. It only works on lit-element projects / components. Are there plans to adopt lit 2.x ?

It is likely that a component by itself will not be enough for a meaningful demo (users might need a bit more context sometimes)

For instance, instead of providing this template that will only output a value (124.0)

<template data-element="d3-format" data-target="host">
    <d3-format specifier=".1f" value='123.999'></d3-format>
 </template>

it could be more helpful to have smth like:

<template data-element="d3-format" data-target="host">
   <div>value 123.999 will be formatted as <strong><d3-format specifier=".1f" value='123.999'></d3-format></strong></div>
</template>

Potential constraints for the template:

• one single root element
• only one element with same name as the demo data-element.

Perhaps I'm missing something but I'm unable to show slotted content in the correct named slot="some-name" in the live demo.

Say I have the following setup:

<some-footer>
      <some-list slot="one">
            <li>Info</li>
            <li><a href="#">Some Link 1</a></li>
            <li><a href="#">Some Link 2</a></li>
            <li><a href="#">Some Link 3</a></li>
            <li><a href="#">Some Link 4</a></li>
            <li><a href="#">Some Link 5</a></li>            
      </some-list>
      <some-list slot="two">
            <li>Info</li>
            <li><a href="#">Some Link 1</a></li>
            <li><a href="#">Some Link 2</a></li>
            <li><a href="#">Some Link 3</a></li>
            <li><a href="#">Some Link 4</a></li>
            <li><a href="#">Some Link 5</a></li>            
      </some-list>
</some-footer>

Where some-footer is:

 * @slot one
 * @slot two

<footer>
        
     <nav>
       <slot name="one"></slot>
     </nav>

    <nav>
       <slot name="two"></slot>          
    </nav>
</footer>

What I see if I use <template type="host"> is the names of the slots defined in the docjs (e.g. @slot one) instead of the slotted content.

If I use <template type="slot"> all slotted content is added to the last defined slot (e.g. name="two").

I'd like to contribute to the project, but I couldn't figure out how to use the local development environment. When I run the yarn dev or yarn watch command, the modified files are not compiled automatically. Did I miss something? I tried to remove the "files": [], entry from tsconfig but in this case, the compiler complains about the definition files. I'm not skilled enough to fix this issue.

There is an stable version:

https://github.com/markedjs/marked/releases/tag/v1.0.0

current:

<api-viewer src="path/to/manifest.json"></api-viewer>

desired (in addition to src, as an option):

<api-viewer>
  <script slot="manifest" type="application/json">
  { "schemaVersion": 1.0.0, "readme": "..." }
  </script>
</api-viewer>

or:

document.querySelector('api-viewer').manifest = { "schemaVersion": 1.0.0, "readme": "..." }

We use theme attribute for Vaadin components, and it accepts one or several values.
Another example would be dir="rtl" - here we only need one value.

Proposed syntax:

<api-viewer attribute-knobs="dir(ltr|rtl),theme[small|filled|reverse],indeterminate?">

• ? stands for "boolean attribute" (rendered with a checkbox)
• () stands for "one of values or empty" (rendered with <select>)
• [] stands for "zero or more values" (rendered with checkboxes)
• no modificator stands for "any value" (rendered with <input>)

When I provide a default value for a CSS custom property, it does not appear in the API viewer.

When I document this:

/**
* @cssprop [--card-background-color=white] - Background color for card
**/

It only outputs the CSS property and description:

The latest version is now 1.0.0-next.11 and it has new features including methods and mixins.
Need to update to that version, implement the API docs and then release 0.3.0

The idea is to implement a special mode (e.g. using a tab in the "Demo" part).

• DOM flat tree representation: component, its part elements and slot elements

expansion-panel
  ::part(header)
    ::part(toggle)
    ::slotted([slot="name"])
  ::part(content)
    ::slotted(:not([slot]))

• When hovering a row in the list, it should be highlighted in the demo snippet:

• Additionally, borders can be toggled for all the CSS parts in the component

• Clicking every selector allows to edit corresponding CSS rules in a text area.

This could be a symptom of something wrong on my end, but this page:

https://bahrus.github.io/api-viewer/index.html?npmPackage=xtal-frappe-chart&jsPath=xtal-frappe-chart-example1.js

gives error

Error: Cannot read property 'replace' of undefined

when clicking on the demo option.

Unpkg:

Skypack:

jspm.dev

jsdelivr
The only one than can work is https://cdn.jsdelivr.net/npm/[email protected]/+esm. The downside of it there is no syntax highlighting in source panel.

I think I can live without it but is there any chance do you know any other way to use the tool via CDN without those errors and downsides.I tried to build a one IIFE version of the tool to host by myself the JS but no luck for now. Do you know how to do it?

Hi, just tried api-viewer but could not get how to pass an array to an element

The element, written in lit expects a property to be passed as array. It does not reflect to attribute.

I tried using lit-html as below without success:

import 'api-viewer-element'
import '../browserAction/patient-list.js'
import { html, render } from '../third-party/lit.js'

const patients = [{ name: 'João' }, { name: 'Maria' }]

const apiTemplate = html`
  <api-viewer src="../custom-elements.json">
    <template data-element="patient-list" data-target="host">
      <patient-list .patients=${patients}></patient-list>
    </template>
  </api-viewer>
`
render(apiTemplate, document.body)

This is what the snippet looks like in case of empty radio-button:

We should check if the default slot is the only one.
If so, no need to create the <div> here:
https://github.com/web-padawan/api-viewer-element/blob/0669d66385c534e383fc9e368cefeca730e36cd8/src/lib/renderer.ts#L34

Instead, use document.createTextNode and then append it as a child.

Say I have a table with rows that have cells. The table has one slot.

<template data-element="some-table" data-target="slot">
    <some-table-row>
      <some-table-cell>Data</some-table-cell>
    </some-table-row>
</template>

What is the preferred way to style the row and cell? (preferably via an external stylesheet)

Thanks!

web component may render differently than its origin html snippet (eager attributes).
in such cases authors might want source to freeze
this programmatic mutation of dom tree is probably an anti-pattern but still can be an interim and causes confusion in docs.

Let's say I would like to style h2 from a markdown description like:

 ## My new element

describe my element. 

I am aware I can use ::part(docs-description) to set inherited css properties, like font-family. For instance, this will work (and all child elements from [part=doc-description] will inherit from the style):

      api-viewer::part(docs-description) {
        font-family: 'Roboto', 'Noto', sans-serif;
        -webkit-font-smoothing: antialiased;  /* OS X subpixel AA bleed bug */
      }

However, what would be the option if I want to style a h2 element within my markdown description? This for instance has no effect on h2 title element:

api-viewer::part(docs-description) h2 {
    font-size: 34px;
    font-weight: 400;
    letter-spacing: -.01em;
    line-height: 40px;
}

Any other better alternative than dynamically appending a link[rel=stylesheet] tag to api-viewer-content ?

Is it possible to use a little code to set up the demo instance of an element?

I have a complex element which I want to initialise with code, including asynchronously loaded data.
I tried adding a <script> in my template[data-element] but it gets ignored.

Steps to Reproduce the Problem

1. open https://WebPDF.pro/:/0/API.html
2. select <pdf-page> from top right (👆🏻)
3. view
   1. Properties ✔️ (render in the file order)
   2. Events ✔️ (render in the file order)
   3. CSS Custom Properties ❌
      given and expected order: --scale, --width, --height
      render in the following order:
      

{
  "version": 1,
  "tags": [
    {
      "name": "script",
      "description": "<br><strong><a>script src=<u>\"//webpdf.pro/&lt;pdf&gt;\"</u> type=<u>module</u> ium</a></strong><br> enables Web<strong>PDF</strong>.<em>pro</em> elements on a web page.",
      "properties": [
        { "name": "src",     "attribute": "src",     "type": "URL",      "description": "<code>\"//webpdf.pro/&lt;pdf&gt;\"</code> ❄️<br><br>The source is fixed and backed by a ⛅ CDN.<br>We assume including web pages use <code>HTTPS</code>.<h5>On <code>HTTP</code>-only Web Pages</h5><p><code>\"<u>https:</u>//webpdf.pro/&lt;pdf&gt;\"</code> is required.</p>" },
        { "name": "ium",     "attribute": "ium",     "type": "boolean",  "description": "<a>script src=\"❄️\" type=module <strong>ium</strong></a> |<br><a>script src=\"❄️\" type=module <strong>♊</strong></a><br><br>Use a more accurate engine for rendering pages by default.<h5>Notes</h5><p>Requires files to be completely loaded before processing.</p><h5>🆕 Release</h5><p><code>2021-06-13</code> – coming soon!</p>" },
        { "name": "measure", "attribute": "measure", "type": "boolean 🧪",  "description": "<a>script src=\"️️❄️\" type=module <strong>measure</strong></a> |<br><a>script src=\"❄️\" type=module <strong>⏳</strong></a><br><br><code>performance.measure()</code> some operations.<h5>Get Entries</h5><p><code>performance.getEntriesByType('measure').filter(m => m.name.startsWith('🌐📄'))</code></p>" }
      ]
    },
    {
      "name": "pdf-file",
      "description": "<br><strong><a>pdf-file</a></strong> element embeds a PDF file.<br><a>pdf-file id src password</a><code>.save()</code>",
      "properties": [
        { "name": "src",             "attribute": "src",            "type": "URL",                   "description": "The PDF file URL.<h5>Events</h5><p>⚡<code>load</code>⦚<code>error</code></p>" },
        { "name": "data",                                           "type": "🔄 Uint8Array",         "description": "The PDF file bytes.<br><br>🔄 get: without user changes.<br>⬇ set: load a file from bytes.<h5>Events</h5><p>⚡<code>load</code>⦚<code>error</code></p>" },
        { "name": "saveData()",                                     "type": "️🔄 Uint8Array",         "description": "Save the PDF file bytes with user changes." },
        { "name": "save(name?)",                                    "type": "🔄 File",               "description": "Save a copy of the PDF file with user changes." },
        { "name": "name",                                           "type": "string",                "description": "<a>pdf-file <strong>src</strong></a> <u style=\"text-decoration: 2px underline; text-decoration-color: var(--ave-accent-color);\">file name</u> part.<br><code><a>pdf-file src=\"⋯/<u style=\"text-decoration: 2px underline; text-decoration-color: var(--ave-accent-color);\">f.pdf</u>?⋯\"</a></code><br><br>⬇ set: change <a>pdf-file <strong>src</strong></a>.<h5>Events</h5><p>⚡<code>load</code>⦚<code>error</code></p>" },
        { "name": "password",        "attribute": "password",       "type": "string",                "description": "Required if the PDF file is password-protected; ignored otherwise.<h5>Events</h5><p>⚡<code>load</code>⦚<code>error</code></p>" },
        { "name": "XFDF",                                           "type": "{[🔄 function]}",       "description": "<code>XML Forms Data Format</code>.<br><br><code>import(string | XMLDocument)</code><br><code>export({...}?): XMLDocument</code><br><code>save(name?)</code>" },
        { "name": "pages",                                          "type": "[<pdf-page>]",          "description": "Snapshot array of all document-connected <ol><li>referencing</li><li>descendant</li></ol><a>pdf-page</a> instances.<h5>⛓ Chain of Events</h5><p>1️⃣ <a>pdf-file</a>⚡<code>error</code>⦚<code>load</code> can trigger<br>2️⃣ <a>pdf-page</a>⚡<code>error</code>⦚<code>load</code>→⚡<code>render</code><br>for all document-connected pages of a file.</p>" }
      ],
      "events": [
        { "name": "load",  "description": "Fired on  load. Bubbles.<h5>Properties</h5><p><code>target</code> : <code>&lt;pdf-file&gt;</code></p>" },
        { "name": "error", "description": "Fired on error. Bubbles.<h5>Properties</h5><p><code>target</code> : <code>&lt;pdf-file&gt;</code><br><code>detail</code> : <code>error</code></p>" }
      ]
    },
    {
      "name": "pdf-page",
      "description": "<br><strong><a>pdf-page</a></strong> element embeds a PDF page.<br><a>pdf-page of no scale rotation svg</a>",
      "properties": [
        { "name": "of",       "attribute": "of",       "type": "id",                                 "description": "<a>pdf-file <strong>id</strong></a> reference.<br><h5>Events</h5><p>⚡<code>error</code>⦚<code>load</code>→⚡<code>render</code></p>" },
        { "name": "no",       "attribute": "no",       "type": "number",         "default": "+1",    "description": "<code>⋯ | -1 | +1 | ⋯</code><br><br>Page number.<br><span style=\"opacity: .5\">If negative, count from file end.</span><h5>Events</h5><p>⚡<code>error</code>⦚<code>load</code>→⚡<code>render</code></p>" },
        { "name": "scale",    "attribute": "scale",    "type": "number",         "default": "1.0",   "description": "<code>⋯ | 0.9 | 1.1 | ⋯</code><br><br>Image scale.<h5>Events</h5><p>⚡<code>render</code></p>" },
        { "name": "rotation", "attribute": "rotation", "type": "number",         "default": "📄??0", "description": "<code>&nbsp;+90 | +180 | +270</code> ↩<br><code>-270 | -180 | &nbsp;-90</code> ↪<br><br>Rotate viewport at right angles.<h5>Notes</h5><p>Other multiples of <code>±90</code> get normalized.</p><h5>Events</h5><p>⚡<code>render</code>⦚<code>error</code></p>" },
        { "name": "noText",   "attribute": "no-text",  "type": "boolean",        "default": false,   "description": "Omit text layer used for selections and search 🔍.<h5>Events</h5><p>⚡<code>render</code></p>" },
        { "name": "noAnno",   "attribute": "no-anno",  "type": "boolean",        "default": false,   "description": "Omit annotation/form layer.<h5>Events</h5><p>⚡<code>render</code></p>" },
        { "name": "canvas",   "attribute": "canvas",   "type": "string",                             "description": "<a>pdf-page</a>: use more accurate rendering¹<br><a>pdf-page canvas=.js</a>: use less accurate rendering<h5>Notes</h5><p>¹ requires <a>script src=\"❄️\" type=module <strong>ium</strong></a>.</p><h5>Events</h5><p>⚡<code>render</code></p>" },
        { "name": "svg",      "attribute": "svg",      "type": "boolean",        "default": false,   "description": "🧪 Use <a>svg</a> for vector rendering.<br><span style=\"opacity: .5\">If unset, use <a>canvas</a> for raster rendering.</span><h5>Events</h5><p>⚡<code>render</code></p>" },
        { "name": "file",                              "type": "<pdf-file>",                         "description": "Referenced or ancestor <a>pdf-file</a>." }
      ],
      "cssProperties": [
        { "name": "--scale",  "type": "<number>",   "default": "1.0", "description": "Image scale = <a>pdf-page <strong>scale</strong></a>.<h5>💡 Use for Resolution</h5><p><code>pdf-page { width: calc(var(--width) / var(--scale)); }</code></p><h5>Notes</h5><p>Value is not used internally.</p>" },
        { "name": "--width",  "type": "<dimension>",                  "description": "Image width = 📄 × <a>pdf-page <strong>scale</strong></a>.<h5>Notes</h5><p>Value is not used internally.</p>" },
        { "name": "--height", "type": "<dimension>",                  "description": "Image height = 📄 × <a>pdf-page <strong>scale</strong></a>.<h5>Notes</h5><p>Value is not used internally.</p>" }
      ],
      "events": [
        { "name": "load",   "description": "Fired on   load. Bubbles.<h5>Properties</h5><p><code>target</code> : <code>&lt;pdf-page&gt;</code></p>" },
        { "name": "error",  "description": "Fired on  error. Bubbles.<h5>Properties</h5><p><code>target</code> : <code>&lt;pdf-page&gt;</code><br><code>detail</code> : <code>error</code></p>" },
        { "name": "render", "description": "Fired on render. Bubbles.<h5>Properties</h5><p><code>target</code> : <code>&lt;pdf-page&gt;</code></p><code>detail</code> : <code>{ all, image, text, anno }</code> (all boolean indicating which layers rendered)</p>" }
      ]
    }
  ]
}

I want to be able to provide my own demos and code snippets instead of rely on api-viewer-element to automatically generate them. They don't always come out accurate.

Here are my use-cases:

1. I have 3 types of checkboxes within one custom element, but only one example is shown. I would like to show all three.

<!-- regular checkbox -->
<checkbox>Sign me up for daily emails</checkbox>

<!-- inline checkbox -->
<checkbox inline>Electronics</checkbox>

<!-- tile checkbox -->
<checkbox tile>R&B</checkbox tile>

<!-- api-viewer-element only shows the regular checkbox -->
<checkbox>Text me</checkbox>

2. I have a custom button dropdown menu that requires you to slot in <button>s or <a>s, but the demo shows using <div>s, which is incorrect.

<!-- correct implementation -->
<button-dropdown>
  Actions
  <button slot="option">Download CSV</button>
  <button slot="option">Download Excel</button>
  <a href="#" slot="option">Email</a>
  <button slot="option">Print</button>
</button-dropdown>

<!-- api-viewer-viewer is generating this, which is incorrect -->
<button-dropdown>
  Actions
  <div slot="option">Download CSV</div>
  <div slot="option">Download Excel</div>
  <div slot="option">Email</div>
  <div slot="option">Print</div>
</button-dropdown>

I'm checking in to see if you have any plans to support https://www.npmjs.com/package/custom-elements-manifest and it's 1.0.0 release? We just had a great discussion with the w3c Web Components Community Group where many attendees praised you great work here and thought it would be great to see motion in this regard. I'm sure if you didn't feel you had the time that we could could find a community member excited to submit a PR with agreed upon modification in this area.

We need to provide a way for creating knobs for properties annotated with enums:

@prop {horizontal|vertical} orientation

This was requested in vaadin/vaadin-split-layout#141.

if the data of custom-elements.json is not available as file but only as a javascript object (or if I want to fetch it/extract it from somewhere else) then it would be nice to be able to set the data directly.

Component looks really nice!

I tried using this component using cdn support.

You can see my attempts here: https://github.com/bahrus/hypo-link/blob/master/demo/syntax.html

One of the attempts is commented out.

Neither worked, for different reasons.

Hoping this can be fixed (if it hasn't already).

I have tried to run the analyzer on one of the lion components. Summary the steps I did:

npm install -g @custom-elements-manifest/analyzer
git clone https://github.com/ing-bank/lion.git
cd lion
cem analyze packages/button/src/LionButton.js --litelement

But I am getting an error:

/Users/username/.nvm/versions/node/v16.13.0/lib/node_modules/@custom-elements-manifest/analyzer/node_modules/command-line-args/dist/index.js:1345
        const err = new Error(`Unknown value: ${arg}`)

UNKNOWN_VALUE: Unknown value: packages/button/src/LionButton.js
    at commandLineArgs (/Users/username/.nvm/versions/node/v16.13.0/lib/node_modules/@custom-elements-manifest/analyzer/node_modules/command-line-args/dist/index.js:1345:21)

Do I miss something?

CEM recently got a deprecated flag on most entities. It can either be a boolean or a string deprecation reason. We should support deprecated in the props, slots, events, methods, and css docs viewers.

As an initial suggestion, perhaps deprecated properties could display with a soft red background (set by a css property) with a red border, and the deprecation reason (if present) in italics in a footer of the docs item.

Hi,

Thanks for the great work :)
I'd be great if <api-viewer> has a 'selected-tag' prop, which then could be bound (using its index) to the selected in <api-viewer-contents>.

This would potentially enable binding the 'selected-tag' property to url query / hash params. This would be really powerful when using watch & reload scripts and returning to the same doc and/or demo page.

Thanks for this initiative!

I'd like to have the option to set the ApiViewerContent's section property.

When using --watch on es-dev-server the server reloads on every save, which is great, but I'd rather see my changes in the 'Live playground' than in the 'API docs viewer'.

Thanks again!