`Target-group` slot strategy #5664

alionazherdetska · 2025-06-17T06:55:18Z

alionazherdetska
Jun 17, 2025
Maintainer

Current Issue: Target-group html/css components need to be positioned differently:

Desktop: In the global header area
Mobile: Inside the main navigation menu

Option 1: Duplicate Slots (currently implemented in https://github.com/swisspost/design-system/pull/5648/files)
Requires users to provide the same content twice with different slot names

<post-header>
  <!-- Logo -->
  <post-logo slot="post-logo" url="/">Homepage</post-logo>
  
  <!-- TARGET GROUP FOR DESKTOP -->
  <ul slot="target-group" class="target-group">
    <li><a href="#" class="active">Private customers</a></li>
    <li><a href="#">Business customers</a></li>
    <li><a href="#">Authorities</a></li>
  </ul>

  <!-- Main Navigation -->
  <post-mainnavigation>
    <button slot="back-button" class="btn btn-sm btn-tertiary">
      <post-icon name="arrowleft"></post-icon> Back
    </button>
    
    <!-- TARGET GROUP FOR MOBILE (duplicate content) -->
    <ul slot="target-group" class="target-group">
      <li><a href="#" class="active">Private customers</a></li>
      <li><a href="#">Business customers</a></li>
      <li><a href="#">Authorities</a></li>
    </ul>
    
    <post-list title-hidden="">
      <post-list-item><a href="/letters">Letters</a></post-list-item>
      <!-- ... more nav items -->
    </post-list>
  </post-mainnavigation>
</post-header>

Option B: Component Refactoring
Single slot usage with component composition changes

<!-- cargo index.html -->
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
    <post-header>
      <ul class="target-group" slot="target-group">
        ...
      </ul>
 
      <button slot="back-button">Back</button>
 
      <ul slot="mainnavigation">
        <li>Home</li>
        <li>About</li>
        <li>Contact</li>
      </ul>
    </post-header>
</body>
</html>
 
<!-- post-header.tsx -->
<script>
  function render () {
    return (
      <Host>
        <div class="global-header">
          {this.device === 'desktop' ? <slot name="target-group"></slot> : null }
        </div>
 
        <div class="local-header">
          <!--
            this could work, because we use <post-mainnavigation/> in the post-header directly
            the slots defined within would actually belong to the <post-header/> component and
            pass its slotted content to the <post-mainnavigation/> component
 
            BUT: it would also produce a breaking change,
            because the <post-mainnavigation/> declaration is no longer needed in the declaring HTML file!
          -->
          <post-mainnavigation>
            <slot name="back-button"></slot>
            <slot name="target-group"></slot>
            <slot name="mainnavigation"></slot>
          </post-mainnavigation>
        </div>
      </Host>
    );
  }
</script>
 
<!-- post-mainnavigation.tsx -->
<!-- the component would no longer be slotted to the post-header, but instead used directly inside the it, as shown above -->
<script>
  function render () {
    return (
      <Host>
        <div>
          <slot name="back-button"></slot>
        </div>
 
        <div>
          <slot name="target-group"></slot>
        </div>
 
        <div class="scroll-left">...</div>
        <nav>
          <slot name="mainnavigation"></slot>
          </nav>
        <div class="scroll-right">...</div>
      </Host>
    );
  }
</script>

Which approach should we implement?

Duplicate Slots

0%

Component Refactoring

100%

Other ideas

0%

1 vote

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

`Target-group` slot strategy #5664

Uh oh!

{{title}}

Uh oh!

Replies: 0 comments

Select a reply

Uh oh!

Target-group slot strategy #5664

Uh oh!

alionazherdetska Jun 17, 2025 Maintainer

Replies: 0 comments

`Target-group` slot strategy #5664

alionazherdetska
Jun 17, 2025
Maintainer