counter-list-item-slot-order.html

Enable keyboard shortcuts

This WPT test may be referenced by the following Test IDs:
- /css/css-lists/counter-list-item-slot-order.html - WPT Dashboard Interop Dashboard

<!DOCTYPE html>

<html>

  <head>

    <title>HTML LI element: counter order with Shadow DOM and SLOT</title>

    <link rel="author" title="Martin Robinson" href="mailto:mrobinson@igalia.com">

    <link rel="help" href="https://www.w3.org/TR/css-lists-3/#inheriting-counters">

    <link rel="match" href="counter-list-item-slot-order-ref.html">

    <style>

      li::before { content: counters(list-item,'.') ' '; }

    </style>

  </head>

  <body>

    <div id="host">

      <li slot="list3">Two Point One</li>

      <li slot="list2">Two</li>

      <li slot="list1">One</li>

    </div>

    <script>

      const shadowRoot = document

          .getElementById('host')

          .attachShadow({mode: 'open'});

      shadowRoot.innerHTML = `

          <ol>

            <slot name="list1"></slot>

            <slot name="list2"></slot>

            <ol>

                <slot name="list3"></slot>

            </ol>

          </ol>

`;

    </script>

  </body>

</html>