使用：host-context（）和一个相邻的兄弟选择器 [英] Using :host-context() with an adjacent sibling selector

问题描述

我想使用：host-context（）和相邻的兄弟选择器来为这样的元素设置样式：

  < x-foo id =1active>< / x-foo> 
< x-foo id =2>< / x-foo> <！ -  use：host-context（）to target＃2 when adjacent sibling，＃1 is [active]  - > 
< x-foo id =3>< / x-foo> 
  

我的元素定义看起来像：

 < dom-module id =x-foo> 
< template> 
< style> 
：host-context（x-foo [active] + x-foo）{
 background-color：yellow; 
} 
< / style> 
 Hello 
< / template> 
< script src =x-foo.js>< / script> 
< / dom-module> 
  

但这不行。为什么不呢？

解决方案

：host（）和：host-context（）作为参数，而不是复杂的选择器。

x-foo [active] + x-foo 是包含两个复合选择器的复杂选择器， x-foo [active] 和 x-foo 由相邻兄弟组合器。 ：host（）和：host-context（）可以接受复合选择器，不幸的是，因为影子主机的兄弟元素不存在于影子上下文中，所以您将无法编写 x-foo [active] +：host 。因此，我不认为你将能够完成你想在阴影的上下文做什么。 （在轻量级上下文中，当然，你可以写 x-foo [active] + x-foo ，但是会破坏将CSS预包装到web组件的目的。 ）

我不清楚为什么：host（）和：host-context （）没有被指定允许复杂的选择器，因为如果他们这样做，你就会有什么工作。

I'm trying to use :host-context() and adjacent sibling selectors to style an element like this:

<x-foo id="1" active></x-foo>
<x-foo id="2"></x-foo> <!-- use :host-context() to target #2 when adjacent sibling, #1 is [active] -->
<x-foo id="3"></x-foo>

My element definition looks something like:

<dom-module id="x-foo">
    <template>
        <style>
           :host-context(x-foo[active] + x-foo) {
               background-color: yellow;
           }
        </style>
        Hello
    </template>
    <script src="x-foo.js"></script>    
</dom-module>

However this doesn't quite work. Why not?

解决方案

:host() and :host-context() only accept a compound selector as their argument, and not a complex selector.

x-foo[active] + x-foo is a complex selector that contains two compound selectors, x-foo[active] and x-foo, separated by the adjacent sibling combinator. :host() and :host-context() can accept either compound selector, but not any combinators.

Unfortunately, because the shadow host's siblings do not exist in the shadow context, you won't be able to write something like x-foo[active] + :host. As a consequence, I don't think you will be able to accomplish what you're looking to do in a shadow context. (In the light context, of course, you can just write x-foo[active] + x-foo, but that defeats the purpose of prepackaging CSS into a web component.)

It's not clear to me why :host() and :host-context() weren't specced to allow complex selectors in the first place, since if they did, what you have would have just worked.

这篇关于使用：host-context（）和一个相邻的兄弟选择器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！