程序员经验分享-hwhale

有没有办法在 Shadow-DOM 中访问 CSS 中的 HTML 标签属性？

2024-04-24

我正在使用 StencilJS 创建一个自定义组件，当用户使用键盘或鼠标导航到该组件时，我必须对轮廓进行一些更改。

我的组件正在使用 ShadowDOM，我想从 CSS 访问 HTML 标签属性。

标签的属性是通过 What-input 生成的 (https://github.com/ten1seven/what-input https://github.com/ten1seven/what-input）来检测键盘和鼠标事件。

我尝试过使用 CSS 选择器，例如[data-whatintent=keyboard] and html[data-whatintent=keyboard]但没有成功。

这是我想要访问的 HTML 标签data-whatintent属性：

<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属性的值在我的组件上设置样式，以便轮廓像我想要的那样。


Supersharp 的答案是正确的，但它不是 StencilJS 代码，而且主机上下文支持很不稳定（在 Firefox 中不起作用，可能在 IE11 中不起作用）。

您可以将属性“传输”到宿主元素，然后使用宿主组件样式内部的选择器：

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;
}

If the data-whatintent属性动态更改，使其成为组件的属性，并让侦听器函数更新您的组件。您可以选择使用该属性向主机添加/删除类以进行样式设置，但您也可以继续使用属性选择器。

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;
}

文档的键盘和鼠标事件处理程序：

function intentHandler(event: Event) {
    const intent = event instanceof KeyboardEvent ? 'keyboard' : 'mouse';
    document.querySelectorAll('my-custom-component').forEach(
        el => el.setAttribute('data-whatintent', intent)
    );
}
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

html

css

typescript

shadowdom

stenciljs

有没有办法在 Shadow-DOM 中访问 CSS 中的 HTML 标签属性？ 的相关文章