feature.LinkTray

[SBBlee]

First draft of linktray, unfinished

[maxatdetroit]

I noticed in the inspector that none of the slotted elements are wrapped in li tags, even though that's what is supposed to happen here.

The reason is that we're creating the li element at line 62 here, but we're not inserting it into the component shadowDOM at any point.

To insert the li into the shadowDOM, we'd have to do something like this:

element.parentNode.insertBefore(li, element);

That would basically tell the browser: find the parent (which happens to be the component root in this case cod-linktray) of the slotted element (the a element), and insert the li right before it. I pasted the rendered HTML for reference below.

<cod-linktray class="linktray">

  <span slot="tray-title"> Mayor's Office </span>

  <a slot="tray-link" href="https://www.example.com">Mayor's Office
  </a><a slot="tray-link" href="https://www.example.com">DPD
  </a><a slot="tray-link" href="https://www.example.com">City Clerk
  </a><a slot="tray-link" href="https://www.example.com">HRD
  </a><a slot="tray-link" href="https://www.example.com">DWSD
  </a><a slot="tray-link" href="https://www.example.com">DPW

  </a><a slot="tray-link" href="https://www.example.com">Mayor's Office
  </a><a slot="tray-link" href="https://www.example.com">DPD
  </a><a slot="tray-link" href="https://www.example.com">City Clerk
  </a><a slot="tray-link" href="https://www.example.com">HRD
  </a><a slot="tray-link" href="https://www.example.com">DWSD
  </a><a slot="tray-link" href="https://www.example.com">DPW

</a></cod-linktray>

[maxatdetroit]

For now, I wouldn't worry about getting the content of the links to looks quite right, or the chevron to appear. Just try to get the story to render with the links wrapped in li elements.

[maxatdetroit]

This isn't quite right. This is taking the slotted a elements, moving them out of the light DOM slot, and moving them into the shadow DOM (and out of the slot).

Notice how there's nothing inside the <slot name=tray-link> slot:

We want the slotted elements to remain in the light DOM slot, but wrapped in li elements.

To keep the elements in the light DOM, we need to add the slot=link-tray attribute to the li tag created, and then append the li elements to the element cod-linktray instead of appending to an element in the shadowRoot like '#tray-links.

You can see an example of how this is done at lines 88-94 for the section navigation component:

COD-Design-System/src/stable/components/SectionNavigation/SectionNavigation.js

Lines 88 to 94 in d908d2e

	// Wrap the 'a' element in an 'li'
	const li = document.createElement('li');
	li.classList.add('nav-item');
	li.setAttribute('slot', 'nav-items');
	element.removeAttribute('slot');
	element.parentNode.insertBefore(li, element);
	li.appendChild(element);

Notice how the resulting HTML looks for the section navigation with the li elements inside the <slot name=nav-items>: