小屏幕下无法隐藏嵌套在带part元素中的#desktoponly div，寻求解决方案

问题原因 #

你使用的<template>应该是用于自定义元素的Shadow DOM中，Shadow DOM自带样式隔离机制，外部CSS无法直接选择到Shadow内部的#desktoponly元素，导致你的媒体查询规则完全不生效。

解决方案 #

方案1：在模板内部嵌入样式（最直接） #

将媒体查询样式直接写在模板内部的<style>标签中，样式会自然作用于Shadow DOM内部的元素：

<template id="header-sidebar-template">
  <style>
    @media (max-width: 1000px) {
      #desktoponly { display: none; }
    }
  </style>
  <div part="base">
    <div part="content">
      <header part="header">
        <div id="desktoponly">
          <p>Hello world!</p>
        </div>
      </header>
    </div>
  </div>
</template>

方案2：用::part选择器从外部控制 #

给目标元素添加part属性，通过外部CSS的::part选择器穿透Shadow DOM的样式隔离：

1. 修改HTML，给#desktoponly新增part属性：

<div id="desktoponly" part="desktop-content">
  <p>Hello world!</p>
</div>

2. 更新外部CSS规则：

@media (max-width: 1000px) {
  ::part(desktop-content) { display: none; }
}

方案3：通过自定义元素:host选择器（可选） #

如果该模板属于某个自定义元素，可通过:host结合后代选择器控制，但需确保自定义元素未开启严格样式隔离：

@media (max-width: 1000px) {
  your-custom-element:host #desktoponly { display: none; }
}

注：这种方式可靠性不如前两种，优先推荐方案1或2。

内容的提问来源于stack exchange，提问作者Matt S