如何在不同类别的不同地方使用相同的阴影DOM

发布于 2025-02-07 02:18:54 字数 1243 浏览 3 评论 0原文

我正在使用一个预制的Web组件，称为rssapp-feed。我想在2个不同的位置使用它

，这样的标准是原始的Shadow dom markup的样子：

和一个带修饰符的 >。

像这样：

我已经通过JavaScript添加了此修饰符类。

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

问题是我只希望仅在Web组件之一中添加修饰符类。通过添加这样的修饰符类，它一直在两个地方添加。无论如何，我适用于这两种修饰符类别的样式。就像我想设置Display：无与类 card-root 的最后一个元素，它会影响两个组件。

有什么方法可以在两个不同类别的两个不同的位置上使用相同的Web组件？

这是我在HTML中使用的Web组件。

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

这是 codesandbox

请任何帮助都是感谢。

原文

I'm using a pre-made web component called rssapp-feed. I want to use this in 2 different places one standard

Like this, this is what the original shadow DOM markup looks like:

and one with modifier class rssapp-feed--sidebar.

Like this:

I have added this modifier class through javascript.

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

The problem is I just want the modifier class to be added in one of the web components only. By adding a modifier class like this it's been adding on both the places. And by this whatever styles I give to modifier class it applies to both of those. Like if I want to set display: none to the last element with the class card-root it affects both the components.

Is there any way to use the same web component on two different places with different classes?

Here is the web component that I'm using in my HTML.

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

Here is the example on codeSandbox

Please any help would be appreciated.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

南薇 2025-02-14 02:18:54

您所需要的只是一个更好的CSS选择器，可以传递到QuerySelector函数。如果您控制了＆lt; rssapp-feed＆gt;/rssapp-feed＆gt;的代码，则只需添加一些唯一的class 或data- *将其归因于此。然后使用它查询。

使用类：

<rssapp-feed id="i0QRdHCkHgYPGNWs"></rssapp-feed>
 
<!-- Unique selector using class -->
<rssapp-feed id="i0QRdHCkHgYPGNWs" class="sidebar"></rssapp-feed>

在您的JS代码中：

// Using class + element selector
document.querySelector('rssapp-feed.sidebar')
  .shadowRoot.querySelector('.rssapp-feed')
  .classList.add('rssapp-feed--sidebar');

或使用数据 - *属性：

<rssapp-feed id="i0QRdHCkHgYPGNWs"></rssapp-feed>
 
<!-- Unique selector using data-* attribute -->
<rssapp-feed id="i0QRdHCkHgYPGNWs" data-id="sidebar"></rssapp-feed>

在JS代码中：

// Using attribute selector
document.querySelector('rssapp-feed[data-id="sidebar"]')
  .shadowRoot.querySelector('.rssapp-feed')
  .classList.add('rssapp-feed--sidebar');

最后，如果您没有对代码的控制Web组件独有的。

All you need is a better CSS selector to pass to the querySelector function. If you have control over the code where <rssapp-feed></rssapp-feed> is being added then simply add some unique class or data-* attribute to it. And then query using it.

Using class:

<rssapp-feed id="i0QRdHCkHgYPGNWs"></rssapp-feed>
 
<!-- Unique selector using class -->
<rssapp-feed id="i0QRdHCkHgYPGNWs" class="sidebar"></rssapp-feed>

In your JS code:

// Using class + element selector
document.querySelector('rssapp-feed.sidebar')
  .shadowRoot.querySelector('.rssapp-feed')
  .classList.add('rssapp-feed--sidebar');

Or using data-* attribute:

<rssapp-feed id="i0QRdHCkHgYPGNWs"></rssapp-feed>
 
<!-- Unique selector using data-* attribute -->
<rssapp-feed id="i0QRdHCkHgYPGNWs" data-id="sidebar"></rssapp-feed>

In your JS code:

// Using attribute selector
document.querySelector('rssapp-feed[data-id="sidebar"]')
  .shadowRoot.querySelector('.rssapp-feed')
  .classList.add('rssapp-feed--sidebar');

Finally, if you don't have control over the code, use some nested CSS selector using some parent which is unique to the web-component.

回复收藏 0 原文

榕城若虚 2025-02-14 02:18:54

您可以扩展任何定义的 Web组件； 在其顶部构建自己的 Web组件：

示例：您可以使用 this dev.to post

<component-a>
 Hello Web Component A!
</component-a>

<component-b>
 Hello Web Component B!
</component-b>

<script>
  customElements.define('component-a', 
  class extends HTMLElement {
    constructor() { 
        super()
          .attachShadow({mode:'open'})
          .innerHTML=`<h1 style="color:red"><slot></slot></h1>`; 
    }
  });
  customElements.whenDefined('component-a').then(()=>{
    customElements.define('component-b', 
    class extends customElements.get("component-a") {
      connectedCallback(){
        if (super.connectedCallback) super.connectedCallback();
        this.shadowRoot.querySelector("h1").style.color = "green";
      }
    });
  })
</script>

You can extend any defined Web Component; and build your own Web Component on top of it:

Example: You can steal a 52 SVG playing cards Web Component with this Dev.to Post

<component-a>
 Hello Web Component A!
</component-a>

<component-b>
 Hello Web Component B!
</component-b>

<script>
  customElements.define('component-a', 
  class extends HTMLElement {
    constructor() { 
        super()
          .attachShadow({mode:'open'})
          .innerHTML=`<h1 style="color:red"><slot></slot></h1>`; 
    }
  });
  customElements.whenDefined('component-a').then(()=>{
    customElements.define('component-b', 
    class extends customElements.get("component-a") {
      connectedCallback(){
        if (super.connectedCallback) super.connectedCallback();
        this.shadowRoot.querySelector("h1").style.color = "green";
      }
    });
  })
</script>

回复收藏 0 原文

~没有更多了~