I2I: fixed-header #14842
Description
Background
In some cases, components will have to render a fixed-size element that overlays the document. One case is minimizing videos to corner.
In cases where there is:
a) a component rendering an overlay
b) a fixed header in the page
The component (a) has no way to determine that a fixed header (b) exists and that its margin should be calculated relative to that element.
Proposal
The contract of fixed-header can be loosely summarized as "don't cover this element". Two options:
Option 1.
Introduce the fixed-header attribute to the <body> tag. This attribute contains a selector reference to a unique element on the page. Interested components can then lookup this attribute to calculate relative positions.
<body fixed-header="#my-header">
<div id="my-header">My page</h1>
<!-- ... -->
</body>Advantage: Lookup is O(1)
Downsides: Awkward API?
Option 2.
Introduce the fixed-header attribute as a base attribute. Only one element in the page may be marked as fixed-header. Interested components can then lookup the element containing this attribute to calculate relative positions.
<body>
<div id="my-header" fixed-header>My page</h1>
<!-- ... -->
</body>Advantage: Tying the attribute to the element itself makes more sense from a semantics POV.
Downsides: slightly slower than looking up the body tag.
/cc @ericlindley-g