有没有一种方法可以在Shadow-DOM中访问CSS中的HTML标签属性? [英] Is there a way of accessing HTML tag attribute in CSS within Shadow-DOM?
问题描述
我正在使用StencilJS创建一个自定义组件，并且当用户使用键盘或鼠标导航到该组件时，必须对轮廓进行一些更改.
I'm creating a custom component with StencilJS and I have to made some changes of the outline when the user is using the keyboard or the mouse to navigate into the component.
我的组件正在使用ShadowDOM，我想从CSS访问HTML标记属性.
My component is using ShadowDOM and I want to access an HTML tag attribute from the CSS.
标记的属性是通过what-input生成的( https://github.com/ten1seven/what-input )以检测键盘事件和鼠标事件.
The tag's attributes are generated with what-input (https://github.com/ten1seven/what-input) to detect keybord and mouse events.
我已经尝试过使用CSS选择器，例如 [data-whatintent = keyboard] 和 html [data-whatintent = keyboard] ，但这没有用.
I've tried using CSS Selectors like [data-whatintent=keyboard] and html[data-whatintent=keyboard] but it didn't worked.
这是我要从中访问 data-whatintent 属性的HTML标记:
This is my HTML tag from which I want to access data-whatintent attribute:
<html dir="ltr" lang="en" data-whatinput="keyboard" data-whatintent="mouse">
<my-custom-component></my-custom-component>
</html>
这是我的CSS:
[data-whatintent=keyboard] *:focus {
outline: solid 2px #1A79C6;
}
我希望ShadowDOM中的CSS可以使用 data-whatintent 属性的值在组件上设置样式，以便轮廓像我想要的.
I want that my CSS within the ShadowDOM can use the data-whatintent attribute's value to set styles on my component so the outline is like I want.
推荐答案
Supersharp的答案是正确的，但是它不是StencilJS代码，并且主机上下文支持也是flakey(在Firefox和IE11中不起作用).
Supersharp's answer is correct, however it's not StencilJS code and also host-context support is flakey (doesn't work in Firefox and probably IE11).
您可以将属性转移"到宿主元素，然后从宿主组件样式内部使用选择器:
You can 'transfer' the attribute to the host element, and then use the selector from inside the host component style:
TSX:
private intent: String;
componentWillLoad() {
this.intent = document.querySelector('html').getAttribute('data-whatintent');
}
hostData() {
return {
'data-whatintent': this.intent
};
}
SCSS:
:host([data-whatintent="keyboard"]) *:focus {
outline: solid 2px #1A79C6;
}
如果 data-whatintent 属性动态更改，则将其设为组件的属性，并让侦听器功能更新您的组件.您可以选择使用该属性向主机添加/删除类以进行样式设置，尽管您也可以继续使用属性选择器.
If the data-whatintent attribute changes dynamically, make it a property of the component, and have the listener function update your component. You can optionally use the property to add/remove classes to the host for styling, although you could also continue to use the attribute selector.
TSX:
@Prop({ mutable: true, reflectToAtrr: true }) dataWhatintent: String;
componentWillLoad() {
this.dataWhatintent = document.querySelector('html').getAttribute('data-whatintent');
}
hostData() {
return {
class: {
'data-intent-keyboard': this.dataWhatintent === 'keyboard'
}
};
}
SCSS:
:host(.data-intent-keyboard) *:focus {
outline: solid 2px #1A79C6;
}
文档的键盘和鼠标事件处理程序:
Document's keyboard and mouse event handler:
function intentHandler(event: Event) {
const intent = event instanceof KeyboardEvent ? 'keyboard' : 'mouse';
document.querySelectorAll('my-custom-component').forEach(
el => el.setAttribute('data-whatintent', intent)
);
}
这篇关于有没有一种方法可以在Shadow-DOM中访问CSS中的HTML标签属性?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
