Free tools Windows power users keep installed
One-click scans. No signup required.
Use a hyphenated tag such as <layout-stack> as a named wrapper for a reusable CSS layout. The tag is author-defined vocabulary; CSS supplies the layout behavior. Without JavaScript registration, it is not a Web Component, and it does not acquire the semantics of a native element such as <button>.
What “CSS-only custom element” means
In this pattern, you write a custom-looking HTML tag and target it with an ordinary CSS selector. The tag gives a recurring layout rule a recognizable name; properties such as display, gap, and alignment rules determine what it does visually.
For example, this markup names a vertical stack:
<layout-stack>
<h2>Heading</h2>
<p>Content</p>
</layout-stack>Its CSS can make the wrapper a flex container with a consistent gap:
layout-stack {
display: flex;
flex-direction: column;
gap: 1rem;
}This is a conceptual example of styling a tag selector, not a claim about a tested implementation. The CSS Display specification explains that display combines an outer display type with an inner layout mode; flex and grid are inner modes that let an element arrange its contents. The tag itself adds no layout capability beyond what CSS already provides. CSS Display Module Level 3
#1 Best Overall
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
How this differs from a Web Component
A hyphen in a tag name does not by itself register a component. A CSS-only wrapper needs no call to customElements.define(), lifecycle callbacks, or Shadow DOM. A registered Custom Element is a JavaScript-defined mechanism for constructing elements and responding to changes; it can support behavior and encapsulation beyond styling. WHATWG HTML Standard: drawbacks of autonomous custom elements web.dev: Custom Elements v1
The distinction matters for meaning as well as implementation. The HTML Standard cautions that “simply defining and using an element called taco-button does not mean that such elements represent buttons.” A layout tag should not stand in for a meaningful native element such as <main>, <nav>, or <button>. The CSS Display specification likewise says CSS does not change an element’s semantics; those come from the document language. WHATWG HTML Standard CSS Display Module Level 3
When a named layout tag is useful
A custom tag can make repeated layout rules easier to spot in markup and give a design system a small, explicit vocabulary. One documented implementation, Vanilla Breeze, demonstrates primitives including stack, grid, sidebar, cluster, center, and switcher. That is an example of the approach, not evidence that every project needs the same vocabulary or a framework. Its documentation also presents a data-layout option. Vanilla Breeze documentation
- Choose a named tag when a layout pattern recurs and its name helps authors understand the wrapper’s visual role.
- Prefer a class or data attribute on native markup when the styling is a one-off adjustment or the extra tag name would make the document less clear.
- Use a semantic native element when the content has a document role that HTML already expresses. Add layout CSS to that element rather than replacing its meaning with a custom wrapper.
Choose the CSS behavior deliberately
The usefulness of a primitive comes from the rules attached to it, not its name. Define the layout mode and the constraints that make the pattern reusable: for example, direction and spacing for a stack, or track sizing and gaps for a grid. Consider how it behaves at narrower widths and what its children are expected to do. A custom tag is still just a selector target; it does not create a new responsive system or sizing behavior.
Do these 3 things before closing this tab:
1Clear out junk files and repair common Windows errors2Scan for outdated or missing drivers - takes under a minute3Repair Windows errors before they cause bigger problemsA separate CSS feature, display: contents, is sometimes used when authors want the wrapper’s children to participate in layout as though the wrapper’s own box were absent. It suppresses the wrapper’s generated box while its children and pseudo-elements can still generate boxes. It is not a generic recipe for layout tags: the CSS Display specification warns that accessibility tools may fail to expose wrapper semantics correctly in major browsers. Avoid applying it casually to a semantically meaningful element, and check behavior in the browsers and assistive technologies relevant to your project. CSS Display Module Level 3
Browser support and accessibility caveats
As of October 2, 2026, Can I Use reports 96.46% global usage for display: contents when supported and partial support are combined. The figure covers the August 2026 usage-share period and is attributed to StatCounter GlobalStats; it is not a claim of full, uniform support. The table continues to mark partial support for several major browser-engine/version ranges. Check its current entries against your target browsers before relying on this behavior. Can I Use: CSS display: contents
Rank #4
That support figure concerns display: contents, not custom-element registration or the general practice of styling a hyphenated tag. Keep semantic HTML intact and treat accessibility behavior as a separate consideration from whether the CSS parses or visually renders.
Quick Recap
Best Value
A practical decision checklist
- Does the content need a native semantic element? Use it, then style it.
- Is this layout repeated enough that a named primitive improves clarity? If not, use a class or data attribute on the existing element.
- Can the pattern be expressed with ordinary CSS layout properties? Specify those rules directly on the selector.
- Does the use case actually need JavaScript behavior, lifecycle reactions, or Shadow DOM? If so, implement a registered Web Component rather than treating a styled tag as one.
- Would the design use
display: contents? Verify current support and accessibility behavior for the relevant browsers and assistive technologies.
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
