Lightning Base components vs Developing Lightning Web Components

Question

I am looking at the lightning design system component blueprint documentation and reviewing the various ways we can use the Lightning Combobox.

For example, in the documentation, they go over Grouped Comboboxes (Cross-entity / Polymorphic) examples that leverage the combobox. The example code that they provide does not leverage the base lightning component combobox.

With the base component, can we develop the same functionality that that they provide in the docs? If not, when should we develop on our own vs leveraging the base components

Base Component

      <lightning-combobox
                name="status"
                label="Status"
                placeholder="Choose Status"
                value={value}
                onchange={handleChange}
                options={statusOptions}
            >

Component Blueprint From Documentation

<div class="slds-form-element">
<label class="slds-form-element__label" for="combobox-id-24">Relate To</label>
<div class="slds-form-element__control">
<div class="slds-combobox-group">
<div class="slds-combobox_object-switcher slds-combobox-addon_start">
<div class="slds-form-element">
<label class="slds-form-element__label slds-assistive-text" for="combobox-id-25" id="combobox-label-id-138">Filter Search by:</label>
<div class="slds-form-element__control">
<div class="slds-combobox_container">
<div class="slds-combobox slds-dropdown-trigger slds-dropdown-trigger_click" aria-controls="primary-combobox-id-1">
<div class="slds-combobox__form-element slds-input-has-icon slds-input-has-icon_right" role="none">
<button type="button" class="slds-input_faux slds-combobox__input slds-combobox__input-value" aria-labelledby="combobox-label-id-138 combobox-id-25-selected-value" id="combobox-id-25-selected-value" aria-controls="objectswitcher-listbox-id-01"
aria-expanded="false" aria-haspopup="listbox">
<span class="slds-truncate" id="combobox-value-id-111">Accounts</span>
</button>
<span class="slds-icon_container slds-icon-utility-down slds-input__icon slds-input__icon_right">
<svg class="slds-icon slds-icon slds-icon_xx-small slds-icon-text-default" aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#down"></use>
</svg>
</span>
</div>
<div id="objectswitcher-listbox-id-01" class="slds-dropdown slds-dropdown_length-5 slds-dropdown_x-small slds-dropdown_left" role="listbox">
<ul class="slds-listbox slds-listbox_vertical" role="group" aria-label="Suggested for you">
<li role="presentation" class="slds-listbox__item">
<div id="object0" class="slds-media slds-listbox__option slds-listbox__option_plain slds-media_small" role="presentation">
<h3 class="slds-listbox__option-header" role="presentation">Suggested for you</h3>
</div>
</li>
<li role="presentation" class="slds-listbox__item">
<div aria-checked="true" id="object1" class="slds-media slds-listbox__option slds-listbox__option_plain slds-media_small slds-is-selected" role="option">
<span class="slds-media__figure slds-listbox__option-icon">
<span class="slds-icon_container slds-icon-utility-check slds-current-color">
<svg class="slds-icon slds-icon_x-small" aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#check"></use>
</svg>
</span>
</span>
<span class="slds-media__body">
<span class="slds-truncate" title="Accounts">Accounts</span>
</span>
</div>
</li>
<li role="presentation" class="slds-listbox__item">
<div id="object2" class="slds-media slds-listbox__option slds-listbox__option_plain slds-media_small" role="option">
<span class="slds-media__figure slds-listbox__option-icon"></span>
<span class="slds-media__body">
<span class="slds-truncate" title="Reports">Reports</span>
</span>
</div>
</li>
<li role="presentation" class="slds-listbox__item">
<div id="object3" class="slds-media slds-listbox__option slds-listbox__option_plain slds-media_small" role="option">
<span class="slds-media__figure slds-listbox__option-icon"></span>
<span class="slds-media__body">
<span class="slds-truncate" title="Contacts">Contacts</span>
</span>
</div>
</li>
<li role="presentation" class="slds-listbox__item">
<div id="object4" class="slds-media slds-listbox__option slds-listbox__option_plain slds-media_small" role="option">
<span class="slds-media__figure slds-listbox__option-icon"></span>
<span class="slds-media__body">
<span class="slds-truncate" title="Files">Files</span>
</span>
</div>
</li>
<li role="presentation" class="slds-listbox__item">
<div id="object5" class="slds-media slds-listbox__option slds-listbox__option_plain slds-media_small" role="option">
<span class="slds-media__figure slds-listbox__option-icon"></span>
<span class="slds-media__body">
<span class="slds-truncate" title="Groups">Groups</span>
</span>
</div>
</li>
<li role="presentation" class="slds-listbox__item">
<div id="object6" class="slds-media slds-listbox__option slds-listbox__option_plain slds-media_small" role="option">
<span class="slds-media__figure slds-listbox__option-icon"></span>
<span class="slds-media__body">
<span class="slds-truncate" title="Leads">Leads</span>
</span>
</div>
</li>
<li role="presentation" class="slds-listbox__item">
<div id="object7" class="slds-media slds-listbox__option slds-listbox__option_plain slds-media_small" role="option">
<span class="slds-media__figure slds-listbox__option-icon"></span>
<span class="slds-media__body">
<span class="slds-truncate" title="Notes">Notes</span>
</span>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="slds-combobox_container slds-combobox-addon_end">
<div class="slds-combobox slds-dropdown-trigger slds-dropdown-trigger_click" id="primary-combobox-id-1">
<div class="slds-combobox__form-element slds-input-has-icon slds-input-has-icon_right" role="none">
<input type="text" class="slds-input slds-combobox__input" id="combobox-id-24" aria-autocomplete="list" aria-controls="listbox-id-20" aria-expanded="false" aria-haspopup="listbox" autoComplete="off" role="combobox" placeholder="Search..." />
<span class="slds-icon_container slds-icon-utility-search slds-input__icon slds-input__icon_right">
<svg class="slds-icon slds-icon slds-icon_x-small slds-icon-text-default" aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#search"></use>
</svg>
</span>
</div>
<div id="listbox-id-20" class="slds-dropdown slds-dropdown_length-with-icon-7 slds-dropdown_fluid" role="listbox">
<ul class="slds-listbox slds-listbox_vertical" role="presentation">
<li role="presentation" class="slds-listbox__item">
<div id="option1" class="slds-media slds-listbox__option slds-listbox__option_entity slds-listbox__option_has-meta" role="option">
<span class="slds-media__figure slds-listbox__option-icon">
<span class="slds-icon_container slds-icon-standard-account">
<svg class="slds-icon slds-icon_small" aria-hidden="true">
<use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#account"></use>
</svg>
</span>
</span>
<span class="slds-media__body">
<span class="slds-listbox__option-text slds-listbox__option-text_entity">Burlington Textiles Corp of America</span>
<span class="slds-listbox__option-meta slds-listbox__option-meta_entity">Account • Burlington, NC</span>
</span>
</div>
</li>
<li role="presentation" class="slds-listbox__item">
<div id="option2" class="slds-media slds-listbox__option slds-listbox__option_entity slds-listbox__option_has-meta" role="option">
<span class="slds-media__figure slds-listbox__option-icon">
<span class="slds-icon_container slds-icon-standard-account">
<svg class="slds-icon slds-icon_small" aria-hidden="true">
<use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#account"></use>
</svg>
</span>
</span>
<span class="slds-media__body">
<span class="slds-listbox__option-text slds-listbox__option-text_entity">Dickenson plc</span>
<span class="slds-listbox__option-meta slds-listbox__option-meta_entity">Account • Lawrence, KS</span>
</span>
</div>
</li>
<li role="presentation" class="slds-listbox__item">
<div id="option3" class="slds-media slds-listbox__option slds-listbox__option_entity slds-listbox__option_has-meta" role="option">
<span class="slds-media__figure slds-listbox__option-icon">
<span class="slds-icon_container slds-icon-standard-account">
<svg class="slds-icon slds-icon_small" aria-hidden="true">
<use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#account"></use>
</svg>
</span>
</span>
<span class="slds-media__body">
<span class="slds-listbox__option-text slds-listbox__option-text_entity">Edge Communications</span>
<span class="slds-listbox__option-meta slds-listbox__option-meta_entity">Account • Austin, TX</span>
</span>
</div>
</li>
<li role="presentation" class="slds-listbox__item">
<div id="option4" class="slds-media slds-listbox__option slds-listbox__option_entity slds-listbox__option_has-meta" role="option">
<span class="slds-media__figure slds-listbox__option-icon">
<span class="slds-icon_container slds-icon-standard-account">
<svg class="slds-icon slds-icon_small" aria-hidden="true">
<use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#account"></use>
</svg>
</span>
</span>
<span class="slds-media__body">
<span class="slds-listbox__option-text slds-listbox__option-text_entity">Express Logistics and Transport</span>
<span class="slds-listbox__option-meta slds-listbox__option-meta_entity">Account • Portland, OR</span>
</span>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>

Answer 1

The blueprints are used for porting the Lightning Design System to other platforms, such as React, Vue, Svelte, etc. They don't include any JavaScript because those might not be compatible with the framework in question. You can also check out lwc-recipes and lightning-base-components. If you can't find something in these two repos, odds are, you'll have to write your own component. Most of them are not too bad, but it's more complicated than just copy-paste.