Можно ли использовать jQuery с Lit-элементом?

Question

Я хочу построить собственную таблицу дерева с элементом Lit, и мне просто интересно, смогу ли я как-то реализовать ее с помощью плагина сетки дерева jQuery.

Это лучшее, что у меня есть сейчас (это решениене тестировался с элементом Lit):

Код:

var toggler = document.getElementsByClassName("caret");
var i;
var padding = 0;
console.log(this);
console.log(this.parentElement);
for (i = 0; i < toggler.length; i++) {
  console.log(toggler[i]);

  toggler[i].style.paddingLeft = (padding * 10) + "%";
  var list = toggler[i].parentElement.getElementsByClassName("name");
  var j;
  for (j = 0; j < list.length; j++) {
    list[j].style.paddingLeft = (padding * 15) + "%";
  }
  padding++;
  toggler[i].addEventListener("click", function() {
    this.parentElement.querySelector(".nested").classList.toggle("active");
    this.classList.toggle("caret-down");
  });
}

ul,
#myUL {
  list-style-type: none;
}

#myUL {
  margin: 0;
  padding: 0;
}

.caret {
  cursor: pointer;
  -webkit-user-select: none;
  /* Safari 3.1+ */
  -moz-user-select: none;
  /* Firefox 2+ */
  -ms-user-select: none;
  /* IE 10+ */
  user-select: none;
}

.caret::before {
  content: "\25B6";
  color: black;
  display: inline-block;
  margin-right: 6px;
}

.caret-down::before {
  -ms-transform: rotate(90deg);
  /* IE 9 */
  -webkit-transform: rotate(90deg);
  /* Safari */
  '
 transform: rotate(90deg);
}

.nested {
  display: none;
}

.active {
  display: block;
}

ul {
  width: 800px;
  /* change it to whatever you like */
  position: relative;
  /* these should be probably already set up by reset.css */
  list-style-type: none;
  margin: 0;
  padding: 0;
}

ul:before,
ul:after {
  text-align: center;
  display: block;
  border: 1px solid black;
  border-bottom: 0;
  width: 48%;
}

li {
  text-align: left;
  width: 48%;
  float: left;
  border: 1px solid black;
  margin-bottom: -1px;
}

li:nth-child(even) {
  margin-left: -1px;
  background-color: antiquewhite;
}

.as-console-wrapper {
  max-height: 64px !important;
}

<ul id="myUL">
  <li><span class="caret"><span>Coffee</span></span>
    <ul class="nested">
      <li><span class="name">Coffee</span></li>
      <li><span>Timeline</span></li>
      <li><span class="name">Coffee</span></li>
      <li><span>Timeline</span></li>
      <li><span class="caret"><span>Coffee</span></span>
        <ul class="nested">
          <li><span class="name">Coffee</span></li>
          <li><span>Timeline</span></li>
          <li><span class="caret"><span>Coffee</span></span>
            <ul class="nested">
              <li><span class="name">Coffee</span></li>
              <li><span>Timeline</span></li>
              <li><span class="name">Coffee</span></li>
              <li><span>Timeline</span></li>
              <li><span class="name">Coffee</span></li>
              <li><span>Timeline</span></li>
              <li><span class="name">Coffee</span></li>
              <li><span>Timeline</span></li>
            </ul>
          </li>
          <li><span>Timeline</span></li>
        </ul>
      </li>
      <li><span>Timeline</span></li>
    </ul>
  </li>
  <li><span>Timeline</span></li>
</ul>

Я не знаю, каково общее или лучшее решение для этого вида дерева таблиц, и это было мое лучшее предположение, с чего начать безJQuery.Есть ли лучший способ создания такого рода компонента?

Я хочу создать что-то вроде этого https://vaadin.com/docs/v7/framework/components/components-treetable.html

Мне просто любопытно, как древовидные таблицы обычно реализуются в Интернете.