Adding items to the Calcite-Split-Button in ESRI ArcGIS API for Javascript

Question

I am trying to create a dynamic split button using Calcite-Split-Button that comes with ESRI and I can't get it to add the drop down items. It shows, all elements are there, but nothing shows when I click on the ellipsis.

I've tried locating an online resource for the API but nothing is there for what attributes I need to load in JS

let calciteBtn = document.createElement("calcite-split-button"); 
calciteBtn.setAttribute('primary-text', 'Run Screening Tool');  
calciteBtn.setAttribute('dropdown-icon-type', 'ellipsis');   
calciteBtn.setAttribute("primary-icon-start", "analysis");
calciteBtn.setAttribute('calcite-dropdown-group', 'selectionMode="single"');
calciteBtn.setAttribute('calcite-dropdown-item', 'Run Tool and save report.');  
calciteBtn.setAttribute('calcite-dropdown-item', 'Run Tool on its own.');  

Answer 1

If you look at the official ArcGIS example at https://developers.arcgis.com/calcite-design-system/components/split-button/, you'll see that structure of button is completely different from what are you trying with your code.

Here is the structure from the example:

<calcite-split-button primary-text="Add a vegetable">
  <calcite-dropdown-group selection-mode="none" group-title="Recently added">
    <calcite-dropdown-item>Pea</calcite-dropdown-item>
    <calcite-dropdown-item>Parsnip</calcite-dropdown-item>
    <calcite-dropdown-item>Radish</calcite-dropdown-item>
    <calcite-dropdown-item>Tomato</calcite-dropdown-item>
    <calcite-dropdown-item>Rutabaga</calcite-dropdown-item>
    <calcite-dropdown-item>Bean</calcite-dropdown-item>
  </calcite-dropdown-group>
</calcite-split-button>

To create this kind of a structure with JS code, it should look something like this:

let calciteBtn = document.createElement("calcite-split-button"); 
calciteBtn.setAttribute('primary-text', 'Run Screening Tool');  
calciteBtn.setAttribute('dropdown-icon-type', 'ellipsis');   
calciteBtn.setAttribute("primary-icon-start", "analysis");

let calciteGroup = document.createElement("calcite-dropdown-group"); 
calciteGroup.setAttribute('selectionMode', 'single"');
calciteBtn.appendChild(calciteGroup);

let calciteItem1 = document.createElement("calcite-dropdown-item"); 
calciteItem1.innerHTML = 'Run Tool and save report.';
calciteGroup.appendChild(calciteItem1);

let calciteItem2 = document.createElement("calcite-dropdown-item"); 
calciteItem2.innerHTML = 'Run Tool and save report.';
calciteGroup.appendChild(calciteItem2);

document.getElementById('body').appendChild(calciteBtn);

That's how it looks like then: