How do I make it work in browser?

[postatum]

Question 1

Here's the project I try to make <api-documentation> element work with: https://github.com/raml-org/playground/tree/integrate_api_console

I've installed it with

npm install --save @api-components/api-documentation

Then I did this step: https://github.com/advanced-rest-client/api-documentation#in-an-html-file

And then when I start the server I see in browser console this error message:

Uncaught TypeError: Failed to resolve module specifier "lit-element". Relative references must start with either "/", "./", or "../".

Question 2

How do I change selected docs section programmatically? E.g. how do I switch between different endpoints' docs?

[jarrodek]

Hi,
Sorry for late response. I, for some reason, wan't watching this repository.

This is correct. With a default "web setup" most web components won't work. There was a wide discussion around it and because everyone is so focused on npm ecosystem they (basically most devs) decided to use npm like reference paths in web components, even if it is against web specification. Me myself started using relative path and after a while I decided to do the same as the rest of developers. See more details here: Polymer/polymer#5238 (comment)

To run web components written this style you need to use server with trans-compiler that rewrites paths to the final (meaning right) form. Such tools are provided by the polymer team (polyserve) or, what I am using, es-dev-server provided by @open-wc team. See package.json file of this repo to see an example: https://github.com/advanced-rest-client/api-documentation/blob/stage/package.json#L68

This is detailed documentation: https://open-wc.org/developing/es-dev-server.html

Also, the component finally has to be bundled into the application. I suggest using instructions from open-wc recommendations for that. They provide plugins for rollup that takes care of everything (including polyfilling your app).

I am closing this as there's nothing I can do here.

[jarrodek]

Also, I can suggest https://github.com/pikapkg/web that will allow you install WC and transform them during installation. I am using this for related project and it works for me.

[postatum]

Thanks a lot @jarrodek. Your advice seems to have worked.
Here's how I made it work:

1. Npm install api-documentation
2. Set its pkg.module and run pika install.

Now regarding question2: How do I switch docs sections without using api-navigation? Repo docs say

The selected property id the @id value of a model to render.

Does this mean I can use AMF model's element @id as a value of selected?

[jarrodek]

Yes, it recognises the @id value. Remember that selected value must correspond to selectedType. Event though IDs are unique, that allows the console to look for data in specific a places instead of iterating over whole model.