document.documentElement.style.setProperty

[rajeevnttdata]

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]

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]

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]

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]

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