search

lit / lit.dev

The Lit website
https://lit.dev
BSD 3-Clause "New" or "Revised" License
119 stars 186 forks source link

document.documentElement.style.setProperty #1192

Closed rajeevnttdata closed 1 year ago

rajeevnttdata commented 1 year ago

How to achieve functionality for document.documentElement.style.setProperty

const documentWidth = window.innerWidth - document.documentElement.clientWidth; const scrollBarValue = documentWidth >= 0 ? documentWidth : 0; document.documentElement.style.setProperty( '--scrollbar-width', ${scrollBarValue}px );

AndrewJakubowicz commented 1 year ago

It's not clear what this question is asking. What you've written sets a custom property --scrollbar-width on probably the root element, which is usually the html element, and is unchanged whether or not you use Lit.

rajeevnttdata commented 1 year ago

document.documentElement.style.setProperty

Hi @AndrewJakubowicz

I just wanted to achieve javascript functionality in lit element. Like dynamically set width using

document.documentElement.style.setProperty is available in javascript.

In the same way, I need to implement a lit element.

AndrewJakubowicz commented 1 year ago

Within a lit element you can call this.style.setProperty, because a lit element is an HTML element, so has the same API.

Live example of using setProperty: https://lit.dev/playground/#gist=65b28ac0aa24c43cfb3508542d2c8f34

However, for dynamic styles prefer styleMap and/or classMap. See documentation for more about declarative dynamic styles: https://lit.dev/docs/components/styles/#dynamic-classes-and-styles

AndrewJakubowicz commented 1 year ago

Closing issue as I think I've answered above. Please re-open or open a new issue if you still have questions.