HTML custom element

<ellipse-data-cricket> is a fully featured replacement for Ellipse Data's <ellipse-data> element.

As of August 2023, it is expected that all current users of <ellipse-data> will migrate to <ellipse-data-cricket> as the former tag will soon be deprecated, and new features and upgrades will only be applied to the latter.

The significant differences of <ellipse-data-cricket> compared to <ellipse-data> are:

Upgrading from <ellipse-data> to <ellipse-data-cricket>

  1. Replace Script

    Remove the old widget script file:

    <script src="https://cricvizwidgets.com/widgets.js"></script>

    Add the the new widget script file (ensuring type="module"), which provisions the <ellipse-data-cricket> tag:

    <script type="module" src="https://widgets.cricviz.com/lib/ellipse-data-cricket.js"></script>

    Note that it is fine to put the new script within the head of your page, as it's type="module" it will only be executed when the page body is loaded.

  2. Upgrade Tag Instances

    For each tag you are using, you should inspect and change where appropriate:

    1. Change attribute names which have multiple words from using underscore_case into the new kebab-case :

    2. Change attribute values which have multiple words from using underscore_case into the new kebab-case :

    3. Note any spelling changes in the new attributes names or values, as some have been modified (eg. to use US English spellings) :

    4. Set the customer-id as attribute into <ellipse-data-cricket>. This should be the same as the API_KEY value which you applied via $ed.start(...) in the old element. Note that you won't need the $ed management in the new version (see below).

  3. Update Custom Styles

    As mentioned above, and in the Getting Started section, custom styling is implemented differently in the new <ellipse-data-cricket> element. Steps:

    1. Remove any styles=true attribute you are setting on the widget, as it is no longer a valid/needed widget option. (Also: Try the new version of the Widget Maker Tool to ensure you are applying the correct attribute names.)

    2. Remove any custom CSS styles you were applying to the old <ellipse-data> element. You will need to rework them for the <ellipse-data-cricket> element using the new custom styling mechanism.
      NOTE: CricViz team should be able to supply you with the set of CSS custom properties and their values which will port your styling of <ellipse-data> across to <ellipse-data-cricket>.

  4. Rework 'Widget Management'

    As stated above, the new <ellipse-data-cricket> element no longer requires the any extra JavaScript management code to be run outside the widget.

    The old <ellipse-data> element used the $ed variable provided by it's script to trigger the loading sequence of the widget, and then remove the widget later:

    $ed(document).ready(() => {
    id: 'API_KEY'

    ... and then somewhere later ...


    The new implemention does not have any variable within the script, but instead uses custom element features to handle the lifecyle of the widget internally within <ellipse-data-cricket>, in much the same way as a standard HTML element might.

    Optimising the data loading of the widget is important, and now this can be achieved by the following:

    • Since the <ellipse-data-cricket> element is a custom HTML element if the ellipse-data-cricket.js script is not loaded, then the browser will simply not render anything for the widget (i.e. 0 height, 0 width, no error).

    • If you apply the new disabled value-less boolean attribute to the widget (see attributes), then it will mean:

      • The widget will not handle any UI events (eg. mouse/key).
      • The widget will not send any network data requests.
    • If the widget is entirely offscreen it will not make any subsequent live-update requests.

    • If the widget has been offscreen or disabled, and becomes partially onscreen and not disabled, then it may make a new request to refresh it's data (and will also resume live-update if it is applied as an attribute.)

    • The widget may also trigger data requests in reaction to certain attributes applied to it changing (eg. match id) change, as a different data feed will be required.