sports-widgets

Preact + Web Components in a shadow root. Drop one script tag on any site, then use the elements from markup.

<script type="module" src="https://sports-widgets.stage.betbrothers.football/sports-widgets.js"></script>
<sports-livescores sport="soccer" day="0" limit="8"></sports-livescores>

<sports-livescores>

<sports-league-table>

Theming

Shadow DOM keeps host CSS out, so restyling goes through custom properties, which do cross the boundary: set --sports-accent, --sports-bg, --sports-border and friends on the element or any ancestor.