Почему псевдоклассы на элементе хоста должны быть внутри функции хоста? - PullRequest
Новая
       66

Почему псевдоклассы на элементе хоста должны быть внутри функции хоста?

0 голосов
/ 21 февраля 2019

Я не понимаю, почему псевдоклассы, такие как :focus-within, должны находиться в скобках :host() при работе с самим хостом.Почему это не может быть :host:focus-within div?Еще более странно, что он работает на :host внутри другого :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-within div{ не работает?

Ответы [ 2 ]

0 голосов
/ 22 февраля 2019

Фактически причина указана в спецификации Селектора 4-го уровня :

Хост теней в дереве теней без особенностей и поэтому не может быть сопоставлен слюбой псевдокласс, кроме :host [...].

Это показано в гиперссылке в примере (и фактически также по ссылке, которую вы указали в своем комментариина ответ @ Intervalia).

Транспонировано в ваш вариант использования:

:focus-within не соответствует теневому хосту.Таким образом, :host:focus-within, который является более конкретным, должен / не может соответствовать чему-либо (что противоречило бы основному выбору CSS).

Следовательно, псевдокласс класса :host(), который будет имитировать другие селекторы, ноне нарушит их логику.

0 голосов
/ 22 февраля 2019

:host предназначен только для обозначения хост-элемента shadowDOM.

:host(.something) указывает хост с классом .something.

Нельзя использовать :host.somethingВы должны использовать круглые скобки.

:host() не является функцией.Это просто, как выбрать :host с дополнительной спецификой. 

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>
...