WebDev Bites: Spacer Component Interface

horizontal and vertical spacer elements

About Introduction Demo Design Interface
<h-s> and <v-s> are lightweight W3C web components that insert horizontal and vertical gaps in the document flow. Size is accepted as element content, a size attribute, or a CSS custom property, resolved in that priority order. Four tag names are registered: <h-space> and its alias <h-s> for horizontal gaps; <v-space> and its alias <v-s> for vertical gaps. All four are independent custom elements backed by the same class body.

1.0 - Use in Application

Place a spacer element inline wherever a gap is needed. Size may be given as element content or via the size attribute: 
  <!-- horizontal gap via inner text -->
  <span>Left</span><h-s>2rem</h-s><span>Right</span>

  <!-- horizontal gap via attribute, with visible thickness -->
  <h-s size="8rem" thickness="2px" style="background-color: orange;"></h-s>

  <!-- vertical gap -->
  <v-s>1.5rem</v-s>

  <!-- inline vertical gap within a line -->
  Line 1 <v-s inline>0.75rem</v-s> Line 2
The only additional requirement is to include the component script: 

      <script src="Components/SpacerComponent/js/SpacerComponent.js" defer></script>

2.0 - Spacer Component Interface

Interface surface What it does Example
Tags <h-space> / <h-s> - horizontal gap.
<v-space> / <v-s> - vertical gap.		 
<h-s>2rem</h-s>
<v-s>1rem</v-s>
size (attribute) CSS length for the gap. Applies to both components. Unitless numbers are treated as rem. Highest priority source. 
<h-s size="20rem"></h-s>
<v-s size="1.5rem"></v-s>
Inner text Size value as element content. Hidden by the shadow slot so it is never rendered. Lower priority than the size attribute. 
<h-s>20rem</h-s>
<v-s>80px</v-s>
block (attribute, h-s only) Boolean. When present, switches <h-s> from inline-block to block display. 
<h-s block size="100%"></h-s>
thickness (attribute, h-s only) Optional visual height. Default 0, keeping the spacer invisible and avoiding baseline shift. 
<h-s size="8rem" thickness="2px"
  style="background-color: orange;">
</h-s>
inline (attribute, v-s only) Boolean. When present, switches <v-s> from block to inline-block for use within a line. 
Line 1 <v-s inline>0.75rem</v-s> Line 2
--h-space-size (CSS var) Width of <h-s>. Lower priority than the size attribute and inner text. 
<h-s style="--h-space-size: var(--gap-xl)">
</h-s>
--h-thickness (CSS var) Visual thickness of <h-s>. Lower priority than the thickness attribute. 
<h-s style="--h-thickness: 2px;
  background-color: rgba(255,165,0,.5)">
  var(--gap-xl)
</h-s>
--v-space-size (CSS var) Height of <v-s>. Lower priority than the size attribute and inner text. 
<v-s style="--v-space-size: var(--gap-md)">
</v-s>
el.size (JS property) Gets or sets the size attribute. Assign null to remove it. Available on both components. 
const sp = document.querySelector('h-s');
sp.size = '4rem';
console.log(sp.size); // '4rem'
el.thickness (JS property, h-s only) Gets or sets the thickness attribute on <h-s>. 
const hs = document.querySelector('h-s');
hs.thickness = '3px';
Live updates (behavior) A MutationObserver watches inner text and child changes. Reassigning element content after mount immediately recalculates the gap. 
const vs = document.querySelector('v-s');
vs.textContent = '3rem'; // applies immediately
FOUC guard (behavior) A :not(:defined) style is auto-injected into <head> on script load. Raw size strings stay hidden until elements register. 
// no author action required —
// handled automatically by SpacerComponent.js