cdn-experiments/ccp/methodlistfragment.html

<div>
  <style>
    input[name=search]{
      display: block;
      width: 100%;
      padding: 0.375rem 0.75rem;
      color: #495057;
      background-color: #fff;
      background-clip: padding-box;
      border: 1px solid #ced4da;
      border-radius: 0.25rem;
      transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    }
    input:focus{
      border-color: #80bdff;
      outline: 0;
      box-shadow: 0 0 0 0.2rem rgb(0 123 255 / 25%); 
    }
    ul.process_list{
      list-style: none;
      padding-left: 0;
      color: #495057;
      display: flex;
      flex-direction: column;
      gap: .25rem;
      user-select: none;
    }
    li.process_list_item{
      display: flex;
      flex-direction: column;
      gap: 0.25rem;
      cursor: pointer;
      border: solid 1px rgba(0,0,0,.3);
      padding: 0.3rem;
      border-radius: 0.3rem;
      box-shadow: #333333 1px 1px 4px;
      background: #eeeeee;
      transition: background .3s;
    }
    li.process_list_item:hover{
      background: #ffffff;
    }
    ul.keyword_list{
      list-style: none;
      display: flex;
      flex-direction: row;
      gap:2px;
      padding-left: 0;
      font-size: x-small;
      font-weight: 300;
    }
    li.keyword_list_item{
      display: inline-block;
      padding: 0.25em 0.4em;
      line-height: 1;
      text-align: center;
      white-space: nowrap;
      vertical-align: baseline;
      border-radius: 0.25rem;
      background-color: #eeffff;
      color: #0099CC;
      border: solid 1px #0099CC;
    }
    .process_list_item_header{
      margin: 0;
    }

  </style>
  <template id="PROCESS_LIST_TEMPLATE">
    <ul class="process_list" name="process_list">
      <li class="process_list_item" draggable="true">
        <h4 class="process_list_item_header"></h4>
        <ul name="keywords" class="keyword_list">
          <li class="keyword_list_item"></li>
        </ul>
        <i></i>
      </li>
    </ul>
  </template>
  <div>
    <input name="search" type="text"/>
    <ul name="process_list"></ul>
  </div>
</div>