Skip to content

Standardize base slot usage and class slot naming conventions across components #1696

@shinokada

Description

@shinokada

Currently, our usage of the base slot is inconsistent:

  • In some components, base refers to the outermost HTML tag.
  • In others, it refers to a significant internal element that may not be the outermost element.
  • Some components do not use a base slot at all.
  • The naming of class slots also varies — some use semantic names like root, header, or content, while others use tag-based names like div, span, or input.

Problems:

  • This inconsistency leads to confusion for users applying custom classes via classes.{slot}.
  • It makes documentation and usage patterns harder to follow.
  • It increases the cognitive load when navigating between components with similar structures but different slot naming.

Proposal:

Standardize base usage:

  • Use the base slot consistently to refer to the outermost HTML element of the component.
  • This provides a predictable entry point for applying wrapper-level classes in multi-slot components.

Establish consistent slot naming conventions:

Decide on one of the following (or a hybrid with clear guidelines):

  • Tag-based naming (div, span, input, etc.): Easy to map to the rendered DOM.
  • Contextual naming (header, content, footer, icon, description, etc.): More semantically meaningful.
  • Hybrid naming: Allow contextual names where appropriate, but default to tag-based names when elements serve no semantic purpose.

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or request

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions