elements Support custom css

User Story Description

As a consumer of the elements web-component,

I want to be able to add my own custom styling to elements to make minor tweaks to the UI,

so I can better match my companies design system.

Acceptance Criteria

[ ] ids exist on html elements so I can more easily target parts of the UI with custom CSSS

Sprint Ready Checklist

[ ] Acceptance criteria defined
[ ] Team understands acceptance criteria
[ ] Team has defined solution / steps to satisfy acceptance criteria
[ ] Acceptance criteria is verifiable / testable
[ ] External / 3rd Party dependencies identified

Jan 06 '23 21:01 kdawgwilk

Any plans on movement for this issue? If not I think we may move on to other solutions

Mar 01 '23 20:03 kdawgwilk

While it would be nice to have a documented way to specify custom CSS, this seems to work:

<head>
 <script src="https://unpkg.com/@stoplight/elements/web-components.min.js"></script>
 <link rel="stylesheet" href="https://unpkg.com/@stoplight/elements/styles.min.css">
 <style>
  .sl-elements .OperationParametersContent {
    max-height: inherit;
  }
 </style>
</head>
<body>
  <elements-api
    apiDescriptionUrl="/openapi.json"
    router="hash"
    layout="sidebar"
  />
</body>

Here I'm replacing the max-height: 162px style of the inputs panel

Sep 08 '25 23:09 gioccher