Can HTML tag attributes be accessed in CSS within the Shadow-DOM?

Question

Can HTML tag attributes be accessed in CSS within the Shadow-DOM?

As I work on developing a custom component using StencilJS, I find myself needing to adjust the outline behavior when users navigate through it with either a keyboard or mouse.

My component employs ShadowDOM and I aim to extract an HTML tag attribute from the CSS styling.

To capture keyboard and mouse events, the attributes of the tag are populated by what-input (https://github.com/ten1seven/what-input).

I experimented with CSS Selectors such as [data-whatintent=keyboard] and html[data-whatintent=keyboard], but unfortunately, they did not yield the desired results.

This is the snippet of my HTML tag where the data-whatintent attribute resides:

<html dir="ltr" lang="en" data-whatinput="keyboard" data-whatintent="mouse">

  <my-custom-component></my-custom-component>

</html>

Below is an excerpt from my CSS file:

[data-whatintent=keyboard] *:focus {
  outline: solid 2px #1A79C6;
}

It is essential for me to leverage the value of the data-whatintent attribute in my ShadowDOM CSS rules to effectively style the component's outline according to my specifications.

html css typescript shadow-dom stenciljs

Answer 1

Answer №1

Supersharp's response is accurate, although it does not consist of StencilJS code and host-context support may be unreliable (especially in Firefox and likely in IE11).

You can 'migrate' the attribute to the host element and then utilize the selector within 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;
}

If the data-whatintent attribute changes dynamically, make it a property of the component and have the listener function update your component. You can also use the property to add or remove classes to the host for styling, or continue using 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)
    );
}

Answer 2

Supersharp's response is accurate, although it does not consist of StencilJS code and host-context support may be unreliable (especially in Firefox and likely in IE11).

You can 'migrate' the attribute to the host element and then utilize the selector within 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;
}

If the data-whatintent attribute changes dynamically, make it a property of the component and have the listener function update your component. You can also use the property to add or remove classes to the host for styling, or continue using 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)
    );
}

Answer 3

Answer №2

To apply a CSS style in a Shadow DOM depending on the context where the Custom Element is used, you can leverage the use of :host-context().

customElements.define( 'my-custom-component', class extends HTMLElement {
    constructor() {
        super()
        this.attachShadow( { mode: 'open' } )
            .innerHTML = `
              <style>
                :host-context( [data-whatinput=keyboard] ) *:focus {
                   outline: solid 2px #1A79C6;
                }
              </style>
              <input value="Hello">`
    }
} )

<html dir="ltr" lang="en" data-whatinput="keyboard" data-whatintent="mouse">

  <my-custom-component></my-custom-component>

</html>

Answer 4

To apply a CSS style in a Shadow DOM depending on the context where the Custom Element is used, you can leverage the use of :host-context().

customElements.define( 'my-custom-component', class extends HTMLElement {
    constructor() {
        super()
        this.attachShadow( { mode: 'open' } )
            .innerHTML = `
              <style>
                :host-context( [data-whatinput=keyboard] ) *:focus {
                   outline: solid 2px #1A79C6;
                }
              </style>
              <input value="Hello">`
    }
} )

<html dir="ltr" lang="en" data-whatinput="keyboard" data-whatintent="mouse">

  <my-custom-component></my-custom-component>

</html>

Can HTML tag attributes be accessed in CSS within the Shadow-DOM?

Answer №1

Answer №2

Similar questions

Using an external font in JavaFX CSS

Fading Out with JQuery

The elusive Ajax seems to be slipping through our grasp,

Tips on storing the amount of time a user devotes to answering questions on my form into a database

Invoke a function of a child component that resides within the <ng-content> tag of its parent component

Disable the movement and dragging functionality of the scroll feature in Google Maps using React

Issue with the camera functionality in phonegap 3.3.0 API on IOS platform

Ensure that all elements are consistently kept within a DIV container

React - A guide on accessing the scroll position of a div using JavaScript

Altering information with the use of history.pushState throughout time

Load HTML content without having to refresh the page

What is the best way to swap out the if else statement with a Ternary operator within a JavaScript function?

The use of findDOMNode has been marked as outdated in StrictMode. Specifically, findDOMNode was utilized with an instance of Transition (generated by MUI Backdrop) that is contained

Creating a full-width input field with text aligned to the right:

Implementing jQuery slideDown effect on a nested table element

Verifying TypeScript Class Instances with Node Module Type Checking

Transferring the chosen dropdown value to the following page

Experimenting with HTML and CSS to enhance email presentation

Dynamic horizontal scrolling

Problem with displaying information in the table based on the numerical input