Do underlying shadow elements support class names and inline styles?

[mister-teddy]

Feature request

I want to justify my button content to the left, but the added class justify-left is put on the <vscode-button> element, which has no effect. I wonder how I can add the class to the underlying <button> element in the shadow root.

Expected behavior

Allow passing class names or inline styles to style the shadow elements.

Current behavior

Cannot style the button because the class names and inline styles are applied to the wrapper elements.

Use case

I'm trying to justify my button content to the left.

Screenshots/references

It would work if the class is passed to the actual <button> element instead:

[dinghar]

+1 I'm trying to disable the default blue outline of a textarea but am unable to accomplish this

[hawkticehurst]

Hey @teddyfullstack! It's not well documented (apologies) but the part attribute/psuedo-element selector can be used to access/style elements within the shadow root.

You can read more about ::part() on MDN, but here's a basic example to give you an idea:

vscode-button::part(control) {
  background-color: red;
  /* insert other arbitrary styles */
}
vscode-button::part(control):hover {
  background-color: blue;
  /* insert other arbitrary styles */
}

Extra notes:

• The part name "control" comes from FAST Foundation and is used widely across other components in the toolkit
• There's no easy way to apply a class name to the elements in the shadow root thanks to how shadow DOM works and how FAST is built

[mister-teddy]

Wow, it worked like a charm. I learned something new, Thank you @hawkticehurst 🙏

[mister-teddy]

Anyone who uses tailwindcss, can add a matchVariant plugin like this:

const plugin = require("tailwindcss/plugin");

/** @type {import('tailwindcss').Config} */
module.exports = {
  plugins: [
    plugin(function ({ matchVariant }) {
      matchVariant("part", (value) => {
        return `&::part(${value})`;
      });
    }),
  ],
};

and then use it:

<VSCodeButton
    className="part-[control]:justify-start part-[content]:flex-1"