i>
            <li><strong>shadow + append:</strong> the same as append, except each component has a shadow DOM</li>
            <li><strong>template + append:</strong> each web component renders its content by cloning a template and appending it</li>
            <li><strong>textcontent:</strong> each web component directly sets its textContent property, instead of adding a span (making the component itself be the span)
            <li><strong>direct:</strong> appends spans instead of custom elements, to be