为什么宿主元素上的伪类必须在宿主函数内部？ [英] Why do pseudoclasses on the host element have to be inside of the host function?

问题描述

我不明白为什么：focus-within 之类的伪类需要放在：host（）之内在主机本身上操作时的功能括号。为什么不能是：host：focus-with-div ？
更奇怪的是，它可以在另一个：host（）内的：host 上运行。

I do not understand why pseudo classes like :focus-within need to be within the :host() function brackets when acting on the host itself. Why can it not be :host:focus-within div? It's even more weird that it works on :host inside of another :host().

class MyElementFail extends HTMLElement {

	constructor(...args) {
		super(...args)

		this.attachShadow({mode: 'open'}).innerHTML = `
		<style>
    :host{
      display: block;
      padding: 20px;
      background-color: salmon;
    }
    :host div{
      background-color: white;
    }
    /*This part is different:*/
		:host:focus-within div{
			background-color: green;
		}
		</style>
    <input type="text" value="click in here"/>
		<div>
    Change to green
		</div>`
	}
}
window.customElements.define('my-element-fail', MyElementFail);


class MyElement extends HTMLElement {

	constructor(...args) {
		super(...args)

		this.attachShadow({mode: 'open'}).innerHTML = `
		<style>
    :host{
      display: block;
      padding: 20px;
      background-color: salmon;
    }
    :host div{
      background-color: white;
    }
    /*This part is different:*/
		:host(my-element:focus-within) div{
			background-color: green;
		}
		</style>
    <input type="text" value="click in here"/>
		<div>
    Change to green
		</div>`
	}
}
window.customElements.define('my-element', MyElement);


class MyElementTwo extends HTMLElement {

	constructor(...args) {
		super(...args)

		this.attachShadow({mode: 'open'}).innerHTML = `
		<style>
    :host{
      display: block;
      padding: 20px;
      background-color: salmon;
    }
    :host div{
      background-color: white;
    }
    /*This part is different:*/
		:host(:host:focus-within) div{
			background-color: green;
		}
		</style>
    <input type="text" value="click in here"/>
		<div>
    Change to green
		</div>`
	}
}
window.customElements.define('my-element-two', MyElementTwo);

No Good:
<my-element-fail></my-element-fail>
Good:
<my-element></my-element>
Good also:
<my-element-two></my-element-two>

基本上是为什么，

：host（：host：focus-within）div {工作，并且

：host（my-element：focus-within）div {工作，但是

：host：focus-with-div {不起作用？

推荐答案

：host 仅用于指示shadowDOM的宿主元素。

:host is only to indicate the host element of the shadowDOM.

：host（.something）指示主机为 .something 类。

不能使用：host.something ，必须使用括号。

You can not use :host.something you must use the parenthesis.

：host（）不是函数。这就是选择具有额外特异性的：host 的方法。

:host() is not a function. It is just how to select a :host with additional specificity.

class MyElement extends HTMLElement {
	constructor() {
		super();
		this.attachShadow({mode: 'open'}).innerHTML = `
		<style>
    :host{
      display: block;
      padding: 20px;
      background-color: salmon;
    }

    div{
      background-color: white;
    }

    :host(:focus-within) div{
			background-color: green;
		}
		</style>
    <input type="text" value="click in here"/>
		<div>Change to green</div>`;
	}
}
window.customElements.define('my-element', MyElement);

<my-element></my-element>

这篇关于为什么宿主元素上的伪类必须在宿主函数内部？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！