Add a `baseline-status` code snippet for each feature

[jamesnw]

Related to #15, it would be useful to have a copyable code snippet on each feature page so people could easily use the baseline-status component for a feature.

We would also need to make it clear on how to install/load the component.

[caraya]

Is there any updates on this?

If not is there any guidelines on how to gather this information from available data?

[jamesnw]

The <baseline-status> component hasn't been integrated into the explorer yet, but you can still use it! More info on component is in its repo, and then you can use the id in the URL here as the featureId attribute value.

For instance, If you're on https://web-platform-dx.github.io/web-features-explorer/features/anchor-positioning/ and want to use the component to show "Anchor Positioning" status, you would use the last part of the URL, and add this to your site-

<baseline-status featureId="anchor-positioning"></baseline-status>

[caraya]

In currently use the baseline-status component but have a hard time identifying the ID for the feature to use

For instance, If you're on https://web-platform-dx.github.io/web-features-explorer/features/anchor-positioning/ and want to use the component to show "Anchor Positioning" status, you would use the last part of the URL, and add this to your site-

<baseline-status featureId="anchor-positioning"></baseline-status>

The problem is that there is no way to figure out the ID for a feature to use with the baseline component. For example, what would the feature ID be for addEventListener, CustomEvents, the Event and CustomEvent constructors?

If I look at MDN, the feature appears as widely available and I havent' been able to figure out what's the ID to use

[jamesnw]

You're looking for events- https://web-platform-dx.github.io/web-features-explorer/features/events

<baseline-status featureId="events"></baseline-status>.

Neither the explorer or MDN directly have a great way of surfacing this, but doing a search of the web-features/features directory should surface where those terms can be found.

[caraya]

That didn't work.

I copied the example you provided into a page on my post and it still reports unknown compatibility.

I tried to pull data from web-features/features but the IDs don't match

[jamesnw]

I tried to pull data from web-features/features but the IDs don't match

Can you say more about what you tried here, and what didn't match?

Here's an example of the component with the events featureId- https://codepen.io/jamessw/pen/dPbNyep

[caraya]

Events now work as intended. All the other features I wanted to use report unknown availability.

I forked your Codepen from your previous comment and used to add the other features that I wanted to use

https://codepen.io/caraya/pen/KwPawwL

[captainbrosset]

That's because the web-features repository does not list all of the individual features of the web. For example, addEventListener, or CustomEvent are not separate features in the repo. Instead, they are grouped with other features that are closely related to them, under a slightly higher-level feature: events.

The way we define features on the repo is by making them match how most developers think about them. As a web developer, you want to know if events are supported as a whole.

MDN does show a baseline widget per reference page. That's why you see one on the addEventListener page. They are not using the baseline-status widget to do this, and instead use some code to compute the status of individual sub-features from our repo. Here is what they use: https://www.npmjs.com/package/compute-baseline

I think this raises a very valid question of whether the baseline-status widget should be allowed to display baseline information for individual BCD keys that are part of web-features. This particular question needs to move to the baseline-status repo. I'll create an issue there.

[caraya]

Thank you :)