feat: banner-context

[PabloReszczynski]

Introduce 1 new components: topsort-banner-slot. This provides a way to show multiple banners for one slotId and running one auction.

Now topsort-banner can be used in two ways: Rendering one banner, or multiple.

Example use case of multiple banners:

<topsort-banner context="true" id="an-example-id" width="800" height="400">
  <topsort-banner-slot rank="1"></topsort-banner-slot>
  <topsort-banner-slot rank="2"></topsort-banner-slot>
</topsort-banner>

Also update the index.html demo page to showcase all the banner elements.

And refactor the main logic of the main banner as a mixin so it is reusable between the different components.

[jbergstroem]

Can we keep the original <topsort-banner> element instead of making a new one, and then look for a sub-tag (similar to what you have; perhaps <topsort-winner rank="1">? The api feels easier to understand

[PabloReszczynski]

Ideally I would use the same element and then pass different attrs depending on context. But Idk how to do that

[jbergstroem]

Thinking that we'd iterate the sub elements and look for <topsort-winner rank="1"> before deciding what logic to apply?

[PabloReszczynski]

Easier said than done, as there is no easy way for a component to check its children if they have any, as everything is built in an asynchronous manner. So at some point in time the banner could have no children, and then it does. Same goes with attributes: Components attributes are undefined on construction and then defined after it is mounted in the Shadow DOM.

[PabloReszczynski]

After some more digging and experimentation I manage to do it with one component. Tho is more complicated this way, at least we don't have to maintain 3 components.