Issue with css variables and button background styling

I’ve been creating a <share-button> custom element and after I launched it, I noticed that something was funky with default button styling. They were white instead of grey.
I needed to be able to dynamically let the developer style the button that was in my Shadow DOM and to do that you have to use CSS Variables. In Chrome (at least… I need to test other browsers.) there seems to be no way to have a button with a background-color whose value is defined by a CSS Variable even if the value of the CSS variable is ‘initial’, ‘inherit’, something undefined, and have it appear as the default button.

I’ve been creating a <share-button> custom
element
and
after I launched it, I noticed that something was funky with default button
styling. They were white instead of grey.

I needed to be able to dynamically let the developer style the button that was
in my Shadow DOM and to do that you have to use CSS Variables. In Chrome (at
least… I need to test other browsers.) there seems to be no way to have a
button with a background-color whose value is defined by a CSS Variable even
if the value of the CSS variable is ‘initial’, ‘inherit’, something undefined,
and have it appear as the default button.

The instant you do anything with the background color it changes the <button>
to be non-natively styled.

For example:

<style>
#button2 {
  --but2: initial;
  background-color: var(--but2);
}  
</style>
<button>Button 1</button>
<button id="button2">Button 2</button>

Demo:


Here is the image of it failing for me:

There is a way around this. My colleague Surma suggested
that I should try and get the default computed styles, add that to the
custom CSS variable and then apply that to the background-color.

It works, but it is hacky.

<style>
  #button3 {
    --but3: initial;
  }  
</style>
<button>Button 1</button>
<button id="button3">Button 3</button>
<script>
  const defaultButtonStyle = window.getComputedStyle(button3);
  button3.style.setProperty('--but3', defaultButtonStyle.backgroundColor);
  button3.style.backgroundColor = 'var(--but3)';
</script>



Here is the image of it working for me:


Print Share Comment Cite Upload Translate
APA
Paul Kinlan | Sciencx (2024-03-29T07:17:13+00:00) » Issue with css variables and button background styling. Retrieved from https://www.scien.cx/2017/04/07/issue-with-css-variables-and-button-background-styling/.
MLA
" » Issue with css variables and button background styling." Paul Kinlan | Sciencx - Friday April 7, 2017, https://www.scien.cx/2017/04/07/issue-with-css-variables-and-button-background-styling/
HARVARD
Paul Kinlan | Sciencx Friday April 7, 2017 » Issue with css variables and button background styling., viewed 2024-03-29T07:17:13+00:00,<https://www.scien.cx/2017/04/07/issue-with-css-variables-and-button-background-styling/>
VANCOUVER
Paul Kinlan | Sciencx - » Issue with css variables and button background styling. [Internet]. [Accessed 2024-03-29T07:17:13+00:00]. Available from: https://www.scien.cx/2017/04/07/issue-with-css-variables-and-button-background-styling/
CHICAGO
" » Issue with css variables and button background styling." Paul Kinlan | Sciencx - Accessed 2024-03-29T07:17:13+00:00. https://www.scien.cx/2017/04/07/issue-with-css-variables-and-button-background-styling/
IEEE
" » Issue with css variables and button background styling." Paul Kinlan | Sciencx [Online]. Available: https://www.scien.cx/2017/04/07/issue-with-css-variables-and-button-background-styling/. [Accessed: 2024-03-29T07:17:13+00:00]
rf:citation
» Issue with css variables and button background styling | Paul Kinlan | Sciencx | https://www.scien.cx/2017/04/07/issue-with-css-variables-and-button-background-styling/ | 2024-03-29T07:17:13+00:00
https://github.com/addpipe/simple-recorderjs-demo