如何为不同位置的同一Shadow DOM组件配置独立类名

目前正在使用名为rssapp-feed的预制Web组件，计划在页面两个不同位置部署该组件：

• 第一处使用组件自带的标准默认样式，其原生Shadow DOM结构参考如下截图：
  
• 第二处需要为组件添加修饰类rssapp-feed--sidebar，实现定制化的侧边栏样式，预期效果参考如下截图：
  

我最初尝试通过以下JavaScript代码为目标组件添加修饰类：

var a = document.querySelector('rssapp-feed')
       .shadowRoot.querySelector('.rssapp-feed')
       .classList.add('rssapp-feed--sidebar');

但这段代码存在问题：我原本只需要给其中一个组件实例添加该修饰类，实际运行后两个位置的组件都被加上了这个类，后续为该修饰类编写的定制样式（例如给类名为card-root的最后一个元素设置display: none）会同时生效在两个组件上，无法实现两个位置的差异化展示。

当前我在HTML中引入并使用该组件的代码如下：

<rssapp-feed id="i0QRdHCkHgYPGNWs"></rssapp-feed>
<script src="https://widget.rss.app/v1/feed.js" type="text/javascript" async></script>

在页面两个不同位置复用同一个Web组件时，要怎么给不同的组件实例配置独立的类名，实现互不干扰的样式定制？

内容的提问来源于stack exchange，提问作者Sara Whitmore