Is there a way of accessing HTML tag attribute in CSS within Shadow-DOM?When is a CDATA section necessary within a script tag?What are valid values for the id attribute in HTML?Adding HTML entities using CSS contentRecommended way to embed PDF in HTML?Convert HTML + CSS to PDF with PHP?Where should I put <script> tags in HTML markup?Difference between id and name attributes in HTMLIs it possible to set the equivalent of a src attribute of an img tag in CSS?What is the purpose of the “role” attribute in HTML?Cannot display HTML string
Where is the bomb: How to estimate the probability, given row and column totals?
Read-once memory
"I will not" or "I don't" as an answer for negative orders?
Is the order of words purely based on convention?
split 1 column input into 5 column bed file
Where to find the Arxiv endorsement code?
Assembly of PCBs containing a mix of SMT and thru-hole parts?
As a team leader is it appropriate to bring in fundraiser candy?
Top off gas with old oil, is that bad?
Convert a string of digits from words to an integer
What happens to a net with the Returning Weapon artificer infusion after it hits?
How do we know neutrons have no charge?
Why isn't there armor to protect from spells in the Potterverse?
Counting files between two corresponding strings in multiple directories
Calculate the Ultraradical
Population of post-Soviet states. Why decreasing?
London Congestion Charge on A205
Is it ok if I haven't decided my research topic when I first meet with a potential phd advisor?
Where's the mandatory argument of sectioning commands
Lost passport which have valid student visa but I make new passport unable paste
Fix Ethernet 10/100 PoE cable with 7 out of 8 wires alive
Why, even after his imprisonment, people keep calling Hannibal Lecter "Doctor"?
Is there no "respectively" in german language when listing (enumerating) something?
I transpose the source code, you transpose the input!
Is there a way of accessing HTML tag attribute in CSS within Shadow-DOM?
When is a CDATA section necessary within a script tag?What are valid values for the id attribute in HTML?Adding HTML entities using CSS contentRecommended way to embed PDF in HTML?Convert HTML + CSS to PDF with PHP?Where should I put <script> tags in HTML markup?Difference between id and name attributes in HTMLIs it possible to set the equivalent of a src attribute of an img tag in CSS?What is the purpose of the “role” attribute in HTML?Cannot display HTML string
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty margin-bottom:0;
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.
My component is using ShadowDOM and I want to access an HTML tag attribute from the CSS.
The tag's attributes are generated with what-input (https://github.com/ten1seven/what-input) to detect keybord and mouse events.
I've tried using CSS Selectors like [data-whatintent=keyboard] and html[data-whatintent=keyboard] but it didn't worked.
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>
And this is my CSS:
[data-whatintent=keyboard] *:focus
outline: solid 2px #1A79C6;
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.
html css typescript shadow-dom stenciljs
edited Apr 19 at 20:34
TylerH
16.6k10 gold badges57 silver badges72 bronze badges
asked Mar 28 at 18:17
VincinoVincino
468 bronze badges
add a comment
|
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.
My component is using ShadowDOM and I want to access an HTML tag attribute from the CSS.
The tag's attributes are generated with what-input (https://github.com/ten1seven/what-input) to detect keybord and mouse events.
I've tried using CSS Selectors like [data-whatintent=keyboard] and html[data-whatintent=keyboard] but it didn't worked.
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>
And this is my CSS:
[data-whatintent=keyboard] *:focus
outline: solid 2px #1A79C6;
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.
html css typescript shadow-dom stenciljs
edited Apr 19 at 20:34
TylerH
16.6k10 gold badges57 silver badges72 bronze badges
asked Mar 28 at 18:17
VincinoVincino
468 bronze badges
You can access it from the component easily e.g.document.querySelector('html').getAttribute('data-whatintent'), but applying the attribute value to style is a whole other question. What exactly do you need to do with the value? Are there a finite number of possible values that you know in advance?
– G. Tranter
Mar 28 at 18:49
Only 2 possible values: keyboard or mouse, but I only want the CSS to have effect when the value iskeyboard.
– Vincino
Mar 28 at 18:59
add a comment
|
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.
My component is using ShadowDOM and I want to access an HTML tag attribute from the CSS.
The tag's attributes are generated with what-input (https://github.com/ten1seven/what-input) to detect keybord and mouse events.
I've tried using CSS Selectors like [data-whatintent=keyboard] and html[data-whatintent=keyboard] but it didn't worked.
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>
And this is my CSS:
[data-whatintent=keyboard] *:focus
outline: solid 2px #1A79C6;
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.
html css typescript shadow-dom stenciljs
edited Apr 19 at 20:34
TylerH
16.6k10 gold badges57 silver badges72 bronze badges
asked Mar 28 at 18:17
VincinoVincino
468 bronze badges
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.
My component is using ShadowDOM and I want to access an HTML tag attribute from the CSS.
The tag's attributes are generated with what-input (https://github.com/ten1seven/what-input) to detect keybord and mouse events.
I've tried using CSS Selectors like [data-whatintent=keyboard] and html[data-whatintent=keyboard] but it didn't worked.
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>
And this is my CSS:
[data-whatintent=keyboard] *:focus
outline: solid 2px #1A79C6;
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.
html css typescript shadow-dom stenciljs
html css typescript shadow-dom stenciljs
edited Apr 19 at 20:34
TylerH
16.6k10 gold badges57 silver badges72 bronze badges
asked Mar 28 at 18:17
VincinoVincino
468 bronze badges
edited Apr 19 at 20:34
TylerH
16.6k10 gold badges57 silver badges72 bronze badges
asked Mar 28 at 18:17
VincinoVincino
468 bronze badges
edited Apr 19 at 20:34
TylerH
16.6k10 gold badges57 silver badges72 bronze badges
edited Apr 19 at 20:34
TylerH
16.6k10 gold badges57 silver badges72 bronze badges
edited Apr 19 at 20:34
TylerH
16.6k10 gold badges57 silver badges72 bronze badges
16.6k10 gold badges57 silver badges72 bronze badges
asked Mar 28 at 18:17
VincinoVincino
468 bronze badges
asked Mar 28 at 18:17
VincinoVincino
468 bronze badges
asked Mar 28 at 18:17
VincinoVincino
468 bronze badges
468 bronze badges
You can access it from the component easily e.g.document.querySelector('html').getAttribute('data-whatintent'), but applying the attribute value to style is a whole other question. What exactly do you need to do with the value? Are there a finite number of possible values that you know in advance?
– G. Tranter
Mar 28 at 18:49
Only 2 possible values: keyboard or mouse, but I only want the CSS to have effect when the value iskeyboard.
– Vincino
Mar 28 at 18:59
add a comment
|
You can access it from the component easily e.g.document.querySelector('html').getAttribute('data-whatintent'), but applying the attribute value to style is a whole other question. What exactly do you need to do with the value? Are there a finite number of possible values that you know in advance?
– G. Tranter
Mar 28 at 18:49
Only 2 possible values: keyboard or mouse, but I only want the CSS to have effect when the value iskeyboard.
– Vincino
Mar 28 at 18:59
You can access it from the component easily e.g.
document.querySelector('html').getAttribute('data-whatintent'), but applying the attribute value to style is a whole other question. What exactly do you need to do with the value? Are there a finite number of possible values that you know in advance?– G. Tranter
Mar 28 at 18:49
You can access it from the component easily e.g.
document.querySelector('html').getAttribute('data-whatintent'), but applying the attribute value to style is a whole other question. What exactly do you need to do with the value? Are there a finite number of possible values that you know in advance?– G. Tranter
Mar 28 at 18:49
Only 2 possible values: keyboard or mouse, but I only want the CSS to have effect when the value is
keyboard.– Vincino
Mar 28 at 18:59
Only 2 possible values: keyboard or mouse, but I only want the CSS to have effect when the value is
keyboard.– Vincino
Mar 28 at 18:59
add a comment
|
2 Answers
2
active
oldest
votes
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;
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)
);
answered Mar 28 at 19:08
G. TranterG. Tranter
7,6581 gold badge10 silver badges33 bronze badges
With this,intentwill always have the same value ? The value ofdata-whatintentis update everytime the user move his mouse or press a key.
– Vincino
Mar 28 at 19:19
1
If that's the use case, then whatever listener is handling the mouse and keyboard usage should fire an event that the component can listen to and update the "intent" value. One possible approach anyway.
– G. Tranter
Mar 28 at 20:45
My CSS didn't update, but my component is re-rendering andintentis update correctly...
– Vincino
Mar 29 at 12:28
My bad, I code it again and it works !
– Vincino
Mar 29 at 18:28
I added an example for dynamic updating.
– G. Tranter
Mar 29 at 18:29
add a comment
|
You sould use :host-context() to apply a CSS style in a Shadow DOM depending on the context where the Custom Element is used.
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>answered Mar 28 at 18:41
SupersharpSupersharp
17.1k3 gold badges40 silver badges81 bronze badges
It didn't work using Stencil. I didn't have access toattachShadow().
– Vincino
Mar 28 at 19:03
@vincino but you can define CSS for your component no?
– Supersharp
Mar 28 at 20:39
add a comment
|
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/4.0/"u003ecc by-sa 4.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55404389%2fis-there-a-way-of-accessing-html-tag-attribute-in-css-within-shadow-dom%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
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;
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)
);
answered Mar 28 at 19:08
G. TranterG. Tranter
7,6581 gold badge10 silver badges33 bronze badges
With this,intentwill always have the same value ? The value ofdata-whatintentis update everytime the user move his mouse or press a key.
– Vincino
Mar 28 at 19:19
1
If that's the use case, then whatever listener is handling the mouse and keyboard usage should fire an event that the component can listen to and update the "intent" value. One possible approach anyway.
– G. Tranter
Mar 28 at 20:45
My CSS didn't update, but my component is re-rendering andintentis update correctly...
– Vincino
Mar 29 at 12:28
My bad, I code it again and it works !
– Vincino
Mar 29 at 18:28
I added an example for dynamic updating.
– G. Tranter
Mar 29 at 18:29
add a comment
|
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;
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)
);
answered Mar 28 at 19:08
G. TranterG. Tranter
7,6581 gold badge10 silver badges33 bronze badges
With this,intentwill always have the same value ? The value ofdata-whatintentis update everytime the user move his mouse or press a key.
– Vincino
Mar 28 at 19:19
1
If that's the use case, then whatever listener is handling the mouse and keyboard usage should fire an event that the component can listen to and update the "intent" value. One possible approach anyway.
– G. Tranter
Mar 28 at 20:45
My CSS didn't update, but my component is re-rendering andintentis update correctly...
– Vincino
Mar 29 at 12:28
My bad, I code it again and it works !
– Vincino
Mar 29 at 18:28
I added an example for dynamic updating.
– G. Tranter
Mar 29 at 18:29
add a comment
|
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;
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)
);
answered Mar 28 at 19:08
G. TranterG. Tranter
7,6581 gold badge10 silver badges33 bronze badges
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;
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)
);
answered Mar 28 at 19:08
G. TranterG. Tranter
7,6581 gold badge10 silver badges33 bronze badges
edited Mar 29 at 18:29
answered Mar 28 at 19:08
G. TranterG. Tranter
7,6581 gold badge10 silver badges33 bronze badges
answered Mar 28 at 19:08
G. TranterG. Tranter
7,6581 gold badge10 silver badges33 bronze badges
answered Mar 28 at 19:08
G. TranterG. Tranter
7,6581 gold badge10 silver badges33 bronze badges
7,6581 gold badge10 silver badges33 bronze badges
With this,intentwill always have the same value ? The value ofdata-whatintentis update everytime the user move his mouse or press a key.
– Vincino
Mar 28 at 19:19
1
If that's the use case, then whatever listener is handling the mouse and keyboard usage should fire an event that the component can listen to and update the "intent" value. One possible approach anyway.
– G. Tranter
Mar 28 at 20:45
My CSS didn't update, but my component is re-rendering andintentis update correctly...
– Vincino
Mar 29 at 12:28
My bad, I code it again and it works !
– Vincino
Mar 29 at 18:28
I added an example for dynamic updating.
– G. Tranter
Mar 29 at 18:29
add a comment
|
With this,intentwill always have the same value ? The value ofdata-whatintentis update everytime the user move his mouse or press a key.
– Vincino
Mar 28 at 19:19
1
If that's the use case, then whatever listener is handling the mouse and keyboard usage should fire an event that the component can listen to and update the "intent" value. One possible approach anyway.
– G. Tranter
Mar 28 at 20:45
My CSS didn't update, but my component is re-rendering andintentis update correctly...
– Vincino
Mar 29 at 12:28
My bad, I code it again and it works !
– Vincino
Mar 29 at 18:28
I added an example for dynamic updating.
– G. Tranter
Mar 29 at 18:29
With this,
intent will always have the same value ? The value of data-whatintent is update everytime the user move his mouse or press a key.– Vincino
Mar 28 at 19:19
With this,
intent will always have the same value ? The value of data-whatintent is update everytime the user move his mouse or press a key.– Vincino
Mar 28 at 19:19
1
1
If that's the use case, then whatever listener is handling the mouse and keyboard usage should fire an event that the component can listen to and update the "intent" value. One possible approach anyway.
– G. Tranter
Mar 28 at 20:45
If that's the use case, then whatever listener is handling the mouse and keyboard usage should fire an event that the component can listen to and update the "intent" value. One possible approach anyway.
– G. Tranter
Mar 28 at 20:45
My CSS didn't update, but my component is re-rendering and
intent is update correctly...– Vincino
Mar 29 at 12:28
My CSS didn't update, but my component is re-rendering and
intent is update correctly...– Vincino
Mar 29 at 12:28
My bad, I code it again and it works !
– Vincino
Mar 29 at 18:28
My bad, I code it again and it works !
– Vincino
Mar 29 at 18:28
I added an example for dynamic updating.
– G. Tranter
Mar 29 at 18:29
I added an example for dynamic updating.
– G. Tranter
Mar 29 at 18:29
add a comment
|
You sould use :host-context() to apply a CSS style in a Shadow DOM depending on the context where the Custom Element is used.
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>answered Mar 28 at 18:41
SupersharpSupersharp
17.1k3 gold badges40 silver badges81 bronze badges
It didn't work using Stencil. I didn't have access toattachShadow().
– Vincino
Mar 28 at 19:03
@vincino but you can define CSS for your component no?
– Supersharp
Mar 28 at 20:39
add a comment
|
You sould use :host-context() to apply a CSS style in a Shadow DOM depending on the context where the Custom Element is used.
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>answered Mar 28 at 18:41
SupersharpSupersharp
17.1k3 gold badges40 silver badges81 bronze badges
It didn't work using Stencil. I didn't have access toattachShadow().
– Vincino
Mar 28 at 19:03
@vincino but you can define CSS for your component no?
– Supersharp
Mar 28 at 20:39
add a comment
|
You sould use :host-context() to apply a CSS style in a Shadow DOM depending on the context where the Custom Element is used.
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>answered Mar 28 at 18:41
SupersharpSupersharp
17.1k3 gold badges40 silver badges81 bronze badges
You sould use :host-context() to apply a CSS style in a Shadow DOM depending on the context where the Custom Element is used.
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>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>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>answered Mar 28 at 18:41
SupersharpSupersharp
17.1k3 gold badges40 silver badges81 bronze badges
edited Mar 28 at 20:41
answered Mar 28 at 18:41
SupersharpSupersharp
17.1k3 gold badges40 silver badges81 bronze badges
answered Mar 28 at 18:41
SupersharpSupersharp
17.1k3 gold badges40 silver badges81 bronze badges
answered Mar 28 at 18:41
SupersharpSupersharp
17.1k3 gold badges40 silver badges81 bronze badges
17.1k3 gold badges40 silver badges81 bronze badges
It didn't work using Stencil. I didn't have access toattachShadow().
– Vincino
Mar 28 at 19:03
@vincino but you can define CSS for your component no?
– Supersharp
Mar 28 at 20:39
add a comment
|
It didn't work using Stencil. I didn't have access toattachShadow().
– Vincino
Mar 28 at 19:03
@vincino but you can define CSS for your component no?
– Supersharp
Mar 28 at 20:39
It didn't work using Stencil. I didn't have access to
attachShadow().– Vincino
Mar 28 at 19:03
It didn't work using Stencil. I didn't have access to
attachShadow().– Vincino
Mar 28 at 19:03
@vincino but you can define CSS for your component no?
– Supersharp
Mar 28 at 20:39
@vincino but you can define CSS for your component no?
– Supersharp
Mar 28 at 20:39
add a comment
|
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55404389%2fis-there-a-way-of-accessing-html-tag-attribute-in-css-within-shadow-dom%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
You can access it from the component easily e.g.
document.querySelector('html').getAttribute('data-whatintent'), but applying the attribute value to style is a whole other question. What exactly do you need to do with the value? Are there a finite number of possible values that you know in advance?– G. Tranter
Mar 28 at 18:49
Only 2 possible values: keyboard or mouse, but I only want the CSS to have effect when the value is
keyboard.– Vincino
Mar 28 at 18:59