"Web components" page missing Baseline status

[dfabulich]

What information was incorrect, unhelpful, or incomplete?

https://developer.mozilla.org/en-US/docs/Web/API/Web_components

What did you expect to see?

There should be a green "Baseline: Widely Available" banner on this page.

Do you have any supporting links, references, or citations?

mdn/rari#554 which fixed #1321

Do you have anything more you want to share?

This page lists two browser-compat keys:

browser-compat:
  - html.elements.template
  - api.ShadowRoot

Apropos #1321 (comment)

yes, we've never handled multiple bcd keys for baseline banners: the logic gets surprisingly tricky.

In this case, though, we should probably just detect that the two keys are the same feature and show that banner: I've opened mdn/rari#554 which does that.

We should go a bit further and show a baseline banner when all of the page's web features have baseline status "high". (This would result in the banner disappearing if just one of the features has a baseline reversion, but reversions from "high" are extremely rare.)

[dfabulich]

My data shows that showing the banner when all of the associated features are Baseline Widely Available would fix these 24 pages:

files/en-us/web/api/media_capture_and_streams_api/index.md
files/en-us/web/api/web_components/index.md
files/en-us/web/api/webgl_api/index.md
files/en-us/web/css/reference/values/display-legacy/index.md
files/en-us/web/css/reference/values/hue/index.md
files/en-us/web/html/reference/attributes/crossorigin/index.md
files/en-us/web/html/reference/attributes/disabled/index.md
files/en-us/web/html/reference/attributes/for/index.md
files/en-us/web/html/reference/attributes/form/index.md
files/en-us/web/html/reference/attributes/max/index.md
files/en-us/web/html/reference/attributes/maxlength/index.md
files/en-us/web/html/reference/attributes/min/index.md
files/en-us/web/html/reference/attributes/minlength/index.md
files/en-us/web/html/reference/attributes/multiple/index.md
files/en-us/web/html/reference/attributes/placeholder/index.md
files/en-us/web/html/reference/attributes/readonly/index.md
files/en-us/web/html/reference/attributes/rel/index.md
files/en-us/web/html/reference/attributes/rel/noopener/index.md
files/en-us/web/html/reference/attributes/rel/noreferrer/index.md
files/en-us/web/html/reference/attributes/required/index.md
files/en-us/web/html/reference/attributes/size/index.md
files/en-us/web/security/defenses/subresource_integrity/index.md
files/en-us/web/svg/reference/attribute/fill/index.md
files/en-us/web/svg/reference/attribute/href/index.md

Details

[
    {
        "path": "files/en-us/web/api/media_capture_and_streams_api/index.md",
        "bcdKeys": [
            "api.MediaStream",
            "api.MediaStreamTrack",
            "api.MediaDevices",
            "api.MediaDeviceInfo",
            "api.InputDeviceInfo",
            "api.CanvasCaptureMediaStreamTrack"
        ],
        "webFeatures": [
            {
                "id": "media-capture",
                "baselineStatus": "high"
            },
            {
                "id": "media-capture",
                "baselineStatus": "high"
            },
            {
                "id": "media-capture",
                "baselineStatus": "high"
            },
            {
                "id": "media-capture",
                "baselineStatus": "high"
            },
            {
                "id": "media-capture",
                "baselineStatus": "high"
            },
            {
                "id": "capture-stream-canvas",
                "baselineStatus": "high"
            }
        ]
    },
    {
        "path": "files/en-us/web/api/web_components/index.md",
        "bcdKeys": [
            "html.elements.template",
            "api.ShadowRoot"
        ],
        "webFeatures": [
            {
                "id": "template",
                "baselineStatus": "high"
            },
            {
                "id": "shadow-dom",
                "baselineStatus": "high"
            }
        ]
    },
    {
        "path": "files/en-us/web/api/webgl_api/index.md",
        "bcdKeys": [
            "api.WebGLRenderingContext",
            "api.WebGL2RenderingContext"
        ],
        "webFeatures": [
            {
                "id": "webgl",
                "baselineStatus": "high"
            },
            {
                "id": "webgl2",
                "baselineStatus": "high"
            }
        ]
    },
    {
        "path": "files/en-us/web/css/reference/values/display-legacy/index.md",
        "bcdKeys": [
            "css.properties.display.inline-block",
            "css.properties.display.inline-table",
            "css.properties.display.inline-flex",
            "css.properties.display.inline-grid"
        ],
        "webFeatures": [
            {
                "id": "display",
                "baselineStatus": "high"
            },
            {
                "id": "display-table",
                "baselineStatus": "high"
            },
            {
                "id": "flexbox",
                "baselineStatus": "high"
            },
            {
                "id": "grid",
                "baselineStatus": "high"
            }
        ]
    },
    {
        "path": "files/en-us/web/css/reference/values/hue/index.md",
        "bcdKeys": [
            "css.types.color.hsl",
            "css.types.color.hwb",
            "css.types.color.lch",
            "css.types.color.oklch"
        ],
        "webFeatures": [
            {
                "id": "hsl",
                "baselineStatus": "high"
            },
            {
                "id": "hwb",
                "baselineStatus": "high"
            },
            {
                "id": "lab",
                "baselineStatus": "high"
            },
            {
                "id": "oklab",
                "baselineStatus": "high"
            }
        ]
    },
    {
        "path": "files/en-us/web/html/reference/attributes/crossorigin/index.md",
        "bcdKeys": [
            "html.elements.audio.crossorigin",
            "html.elements.img.crossorigin",
            "html.elements.link.crossorigin",
            "html.elements.script.crossorigin",
            "html.elements.video.crossorigin"
        ],
        "webFeatures": [
            {
                "id": "audio",
                "baselineStatus": "high"
            },
            {
                "id": "img",
                "baselineStatus": "high"
            },
            {
                "id": "link",
                "baselineStatus": "high"
            },
            {
                "id": "script",
                "baselineStatus": "high"
            },
            {
                "id": "video",
                "baselineStatus": "high"
            }
        ]
    },
    {
        "path": "files/en-us/web/html/reference/attributes/disabled/index.md",
        "bcdKeys": [
            "html.elements.button.disabled",
            "html.elements.fieldset.disabled",
            "html.elements.input.disabled",
            "html.elements.optgroup.disabled",
            "html.elements.option.disabled",
            "html.elements.select.disabled",
            "html.elements.textarea.disabled"
        ],
        "webFeatures": [
            {
                "id": "button",
                "baselineStatus": "high"
            },
            {
                "id": "fieldset",
                "baselineStatus": "high"
            },
            {
                "id": "input",
                "baselineStatus": "high"
            },
            {
                "id": "select",
                "baselineStatus": "high"
            },
            {
                "id": "select",
                "baselineStatus": "high"
            },
            {
                "id": "select",
                "baselineStatus": "high"
            },
            {
                "id": "textarea",
                "baselineStatus": "high"
            }
        ]
    },
    {
        "path": "files/en-us/web/html/reference/attributes/for/index.md",
        "bcdKeys": [
            "html.elements.label.for",
            "html.elements.output.for"
        ],
        "webFeatures": [
            {
                "id": "label",
                "baselineStatus": "high"
            },
            {
                "id": "output",
                "baselineStatus": "high"
            }
        ]
    },
    {
        "path": "files/en-us/web/html/reference/attributes/form/index.md",
        "bcdKeys": [
            "html.elements.button.form",
            "html.elements.fieldset.form",
            "html.elements.input.form",
            "html.elements.object.form",
            "html.elements.output.form",
            "html.elements.select.form",
            "html.elements.textarea.form"
        ],
        "webFeatures": [
            {
                "id": "button",
                "baselineStatus": "high"
            },
            {
                "id": "fieldset",
                "baselineStatus": "high"
            },
            {
                "id": "input",
                "baselineStatus": "high"
            },
            {
                "id": "object",
                "baselineStatus": "high"
            },
            {
                "id": "output",
                "baselineStatus": "high"
            },
            {
                "id": "select",
                "baselineStatus": "high"
            },
            {
                "id": "textarea",
                "baselineStatus": "high"
            }
        ]
    },
    {
        "path": "files/en-us/web/html/reference/attributes/max/index.md",
        "bcdKeys": [
            "html.elements.input.max",
            "html.elements.meter.max",
            "html.elements.progress.max"
        ],
        "webFeatures": [
            {
                "id": "input-number",
                "baselineStatus": "high"
            },
            {
                "id": "meter",
                "baselineStatus": "high"
            },
            {
                "id": "progress",
                "baselineStatus": "high"
            }
        ]
    },
    {
        "path": "files/en-us/web/html/reference/attributes/maxlength/index.md",
        "bcdKeys": [
            "html.elements.input.maxlength",
            "html.elements.textarea.maxlength"
        ],
        "webFeatures": [
            {
                "id": "input",
                "baselineStatus": "high"
            },
            {
                "id": "textarea",
                "baselineStatus": "high"
            }
        ]
    },
    {
        "path": "files/en-us/web/html/reference/attributes/min/index.md",
        "bcdKeys": [
            "html.elements.input.min",
            "html.elements.meter.min"
        ],
        "webFeatures": [
            {
                "id": "input-number",
                "baselineStatus": "high"
            },
            {
                "id": "meter",
                "baselineStatus": "high"
            }
        ]
    },
    {
        "path": "files/en-us/web/html/reference/attributes/minlength/index.md",
        "bcdKeys": [
            "html.elements.input.minlength",
            "html.elements.textarea.minlength"
        ],
        "webFeatures": [
            {
                "id": "input",
                "baselineStatus": "high"
            },
            {
                "id": "textarea",
                "baselineStatus": "high"
            }
        ]
    },
    {
        "path": "files/en-us/web/html/reference/attributes/multiple/index.md",
        "bcdKeys": [
            "html.elements.input.multiple",
            "html.elements.select.multiple"
        ],
        "webFeatures": [
            {
                "id": "input-file-multiple",
                "baselineStatus": "high"
            },
            {
                "id": "select",
                "baselineStatus": "high"
            }
        ]
    },
    {
        "path": "files/en-us/web/html/reference/attributes/placeholder/index.md",
        "bcdKeys": [
            "html.elements.input.placeholder",
            "html.elements.textarea.placeholder"
        ],
        "webFeatures": [
            {
                "id": "input",
                "baselineStatus": "high"
            },
            {
                "id": "textarea",
                "baselineStatus": "high"
            }
        ]
    },
    {
        "path": "files/en-us/web/html/reference/attributes/readonly/index.md",
        "bcdKeys": [
            "html.elements.input.readonly",
            "html.elements.textarea.readonly"
        ],
        "webFeatures": [
            {
                "id": "input",
                "baselineStatus": "high"
            },
            {
                "id": "textarea",
                "baselineStatus": "high"
            }
        ]
    },
    {
        "path": "files/en-us/web/html/reference/attributes/rel/index.md",
        "bcdKeys": [
            "html.elements.link.rel",
            "html.elements.a.rel",
            "html.elements.area.rel",
            "html.elements.form.rel"
        ],
        "webFeatures": [
            {
                "id": "link",
                "baselineStatus": "high"
            },
            {
                "id": "a",
                "baselineStatus": "high"
            },
            {
                "id": "image-maps",
                "baselineStatus": "high"
            },
            {
                "id": "form",
                "baselineStatus": "high"
            }
        ]
    },
    {
        "path": "files/en-us/web/html/reference/attributes/rel/noopener/index.md",
        "bcdKeys": [
            "html.elements.a.rel.noopener",
            "html.elements.area.rel.noopener"
        ],
        "webFeatures": [
            {
                "id": "a",
                "baselineStatus": "high"
            },
            {
                "id": "image-maps",
                "baselineStatus": "high"
            }
        ]
    },
    {
        "path": "files/en-us/web/html/reference/attributes/rel/noreferrer/index.md",
        "bcdKeys": [
            "html.elements.a.rel.noreferrer",
            "html.elements.area.rel.noreferrer"
        ],
        "webFeatures": [
            {
                "id": "a",
                "baselineStatus": "high"
            },
            {
                "id": "image-maps",
                "baselineStatus": "high"
            }
        ]
    },
    {
        "path": "files/en-us/web/html/reference/attributes/required/index.md",
        "bcdKeys": [
            "html.elements.input.required",
            "html.elements.select.required",
            "html.elements.textarea.required"
        ],
        "webFeatures": [
            {
                "id": "input",
                "baselineStatus": "high"
            },
            {
                "id": "select",
                "baselineStatus": "high"
            },
            {
                "id": "textarea",
                "baselineStatus": "high"
            }
        ]
    },
    {
        "path": "files/en-us/web/html/reference/attributes/size/index.md",
        "bcdKeys": [
            "html.elements.select.size",
            "html.elements.input.size"
        ],
        "webFeatures": [
            {
                "id": "select",
                "baselineStatus": "high"
            },
            {
                "id": "input",
                "baselineStatus": "high"
            }
        ]
    },
    {
        "path": "files/en-us/web/security/defenses/subresource_integrity/index.md",
        "bcdKeys": [
            "html.elements.link.integrity",
            "html.elements.script.integrity"
        ],
        "webFeatures": [
            {
                "id": "link",
                "baselineStatus": "high"
            },
            {
                "id": "script",
                "baselineStatus": "high"
            }
        ]
    },
    {
        "path": "files/en-us/web/svg/reference/attribute/fill/index.md",
        "bcdKeys": [
            "svg.elements.animate.fill",
            "svg.elements.animateMotion.fill",
            "svg.elements.animateTransform.fill",
            "svg.elements.circle.fill",
            "svg.elements.ellipse.fill",
            "svg.elements.path.fill",
            "svg.elements.polygon.fill",
            "svg.elements.polyline.fill",
            "svg.elements.rect.fill",
            "svg.elements.set.fill",
            "svg.elements.text.fill",
            "svg.elements.textPath.fill",
            "svg.elements.tspan.fill"
        ],
        "webFeatures": [
            {
                "id": "smil-svg-animations",
                "baselineStatus": "high"
            },
            {
                "id": "smil-svg-animations",
                "baselineStatus": "high"
            },
            {
                "id": "smil-svg-animations",
                "baselineStatus": "high"
            },
            {
                "id": "svg",
                "baselineStatus": "high"
            },
            {
                "id": "svg",
                "baselineStatus": "high"
            },
            {
                "id": "svg",
                "baselineStatus": "high"
            },
            {
                "id": "svg",
                "baselineStatus": "high"
            },
            {
                "id": "svg",
                "baselineStatus": "high"
            },
            {
                "id": "svg",
                "baselineStatus": "high"
            },
            {
                "id": "svg",
                "baselineStatus": "high"
            },
            {
                "id": "svg",
                "baselineStatus": "high"
            },
            {
                "id": "svg",
                "baselineStatus": "high"
            },
            {
                "id": "svg",
                "baselineStatus": "high"
            }
        ]
    },
    {
        "path": "files/en-us/web/svg/reference/attribute/href/index.md",
        "bcdKeys": [
            "svg.elements.a.href",
            "svg.elements.animate.href",
            "svg.elements.animateMotion.href",
            "svg.elements.animateTransform.href",
            "svg.elements.feImage.href",
            "svg.elements.image.href",
            "svg.elements.linearGradient.href",
            "svg.elements.mpath.href",
            "svg.elements.pattern.href",
            "svg.elements.radialGradient.href",
            "svg.elements.script.href",
            "svg.elements.set.href",
            "svg.elements.textPath.href",
            "svg.elements.use.href"
        ],
        "webFeatures": [
            {
                "id": "svg",
                "baselineStatus": "high"
            },
            {
                "id": "smil-svg-animations",
                "baselineStatus": "high"
            },
            {
                "id": "smil-svg-animations",
                "baselineStatus": "high"
            },
            {
                "id": "smil-svg-animations",
                "baselineStatus": "high"
            },
            {
                "id": "svg-filters",
                "baselineStatus": "high"
            },
            {
                "id": "svg",
                "baselineStatus": "high"
            },
            {
                "id": "svg",
                "baselineStatus": "high"
            },
            {
                "id": "svg",
                "baselineStatus": "high"
            },
            {
                "id": "svg",
                "baselineStatus": "high"
            },
            {
                "id": "svg",
                "baselineStatus": "high"
            },
            {
                "id": "svg",
                "baselineStatus": "high"
            },
            {
                "id": "svg",
                "baselineStatus": "high"
            },
            {
                "id": "svg",
                "baselineStatus": "high"
            },
            {
                "id": "svg",
                "baselineStatus": "high"
            }
        ]
    }
]

[dfabulich]

We could even go further than that and show the banner when all of the features have the same baseline status, even when the baseline status is "newly available" or "limited availability." But my data shows that this would impact only a handful of pages, and I think it's reasonable to predict that features will convert from false to low or low to high on different dates.

I think it might be confusing to show a "Limited Availability" banner on a page and then hide the banner when just one of its features becomes "Newly Available". It would be similarly confusing to show a "Newly Available" banner and hide the banner when one of the features graduates to "Widely Available," bringing the banner back only when all of the features graduate.

[
    {"path": "files/en-us/web/api/keyboard_api/index.md", "baselineStatus": false},
    {"path": "files/en-us/web/api/prioritized_task_scheduling_api/index.md", "baselineStatus": false},
    {"path": "files/en-us/web/api/screen_capture_api/index.md", "baselineStatus": false},
    {"path": "files/en-us/web/api/sensor_apis/index.md", "baselineStatus": false},
    {"path": "files/en-us/web/api/url_fragment_text_directives/index.md", "baselineStatus": "low"},
    {"path": "files/en-us/web/html/reference/elements/input/color/index.md", "baselineStatus": false},
    {"path": "files/en-us/web/uri/reference/fragment/text_fragments/index.md", "baselineStatus": "low"}
]

Details

[
    {
        "path": "files/en-us/web/api/keyboard_api/index.md",
        "bcdKeys": [
            "api.Keyboard",
            "api.KeyboardLayoutMap"
        ],
        "webFeatures": [
            {
                "id": "keyboard-lock",
                "baselineStatus": false
            },
            {
                "id": "keyboard-map",
                "baselineStatus": false
            }
        ]
    },
    {
        "path": "files/en-us/web/api/prioritized_task_scheduling_api/index.md",
        "bcdKeys": [
            "api.Scheduler",
            "api.Scheduling"
        ],
        "webFeatures": [
            {
                "id": "scheduler",
                "baselineStatus": false
            },
            {
                "id": "is-input-pending",
                "baselineStatus": false
            }
        ]
    },
    {
        "path": "files/en-us/web/api/screen_capture_api/index.md",
        "bcdKeys": [
            "api.MediaDevices.getDisplayMedia",
            "api.CropTarget",
            "api.RestrictionTarget"
        ],
        "webFeatures": [
            {
                "id": "screen-capture",
                "baselineStatus": false
            },
            {
                "id": "region-capture",
                "baselineStatus": false
            },
            {
                "id": "element-capture",
                "baselineStatus": false
            }
        ]
    },
    {
        "path": "files/en-us/web/api/sensor_apis/index.md",
        "bcdKeys": [
            "api.Sensor",
            "api.Accelerometer",
            "api.OrientationSensor",
            "api.Gyroscope",
            "api.Magnetometer",
            "api.AmbientLightSensor"
        ],
        "webFeatures": [
            {
                "id": "orientation-sensor",
                "baselineStatus": false
            },
            {
                "id": "accelerometer",
                "baselineStatus": false
            },
            {
                "id": "orientation-sensor",
                "baselineStatus": false
            },
            {
                "id": "gyroscope",
                "baselineStatus": false
            },
            {
                "id": "magnetometer",
                "baselineStatus": false
            },
            {
                "id": "ambient-light",
                "baselineStatus": false
            }
        ]
    },
    {
        "path": "files/en-us/web/api/url_fragment_text_directives/index.md",
        "bcdKeys": [
            "api.Document.fragmentDirective",
            "api.FragmentDirective",
            "css.selectors.target-text"
        ],
        "webFeatures": [
            {
                "id": "scroll-to-text-fragment",
                "baselineStatus": "low"
            },
            {
                "id": "scroll-to-text-fragment",
                "baselineStatus": "low"
            },
            {
                "id": "target-text",
                "baselineStatus": "low"
            }
        ]
    },
    {
        "path": "files/en-us/web/html/reference/elements/input/color/index.md",
        "bcdKeys": [
            "html.elements.input.type_color",
            "html.elements.input.alpha",
            "html.elements.input.colorspace"
        ],
        "webFeatures": [
            {
                "id": "input-color",
                "baselineStatus": false
            },
            {
                "id": "input-color-alpha",
                "baselineStatus": false
            },
            {
                "id": "input-color-alpha",
                "baselineStatus": false
            }
        ]
    },
    {
        "path": "files/en-us/web/uri/reference/fragment/text_fragments/index.md",
        "bcdKeys": [
            "html.elements.a.text_fragments",
            "api.FragmentDirective",
            "css.selectors.target-text"
        ],
        "webFeatures": [
            {
                "id": "scroll-to-text-fragment",
                "baselineStatus": "low"
            },
            {
                "id": "scroll-to-text-fragment",
                "baselineStatus": "low"
            },
            {
                "id": "target-text",
                "baselineStatus": "low"
            }
        ]
    }
]

[LeoMcA]

@Rumyra what are your thoughts here?

We should go a bit further and show a baseline banner when all of the page's web features have baseline status "high".

We've discussed showing the web feature name within the banner a few times, and this would break that: as we'd now effectively have multiple web-features associated with a single page, and have to choose one (or merge features somehow).

We'd have the same issue with the date we show, although merging that could be easier (just choose the most recent).

The web components page is an interesting case, as even if we manually defined web features in frontmatter, there isn't one single feature we can reference - instead a web feature group is defined upstream: https://github.com/web-platform-dx/web-features/blob/main/groups/web-components.yml

So this is more a limitation of our banner design/logic than anything, how should it display web feature groups? I think that's something we'll need to discuss upstream.