Bengalaa Bengalaa - 14 days ago 6
CSS Question

put a `<custom-tag>` instead of a `<ul>` or `<ol>` to create a list

Before you mark this as duplicate: i've seen this Can you have <li>s without them being under a <ul> or <ol>? but they solve the problem by using styles.

Here is my question: can I have

<li>
items inside a
<custom-tag>
instead of
<ul>
or
<ol>
elements?

so something like this:

<ul>
<li>one</li>
<li>two</li>
<li>d</li>
<li>three</li>
</ul>


would look like this:

<custom-tag>
<li>one</li>
<li>two</li>
<li>d</li>
<li>three</li>
</custom-tag>


The context of the problem

I want to create a new component for simditor: a component for roman numerals on an orderer list, but it recognizes the
ol
as his "built-in"
ol
button... it seems like it uses the tag names to detect whether the button is active on a piece of the editor, so I want to fix this by using a tag with another name, right now, this solution seems easier than rewriting the whole library.

Answer

No, you can't.

4.4.7 The li element

Contexts in which this element can be used:

  • Inside ol elements.
  • Inside ul elements.

If you want to use custom elements for the lists, you could also use them for the items:

<unordered-list>
  <list-item>one</list-item>
  <list-item>two</list-item>
  <list-item>d</list-item>
  <list-item>three</list-item>
</unordered-list>