[Docs]: Add documentation how to use features of web components

[dinmukhamed09]

Area

Web Components (https://web-components.fluentui.dev)

What kind of documentation issue are you reporting?

• Reporting a typo
• Reporting a documentation bug
• Documentation improvement
• Documentation feedback

Is there a specific documentation page you are reporting?

No.

Description

I'm using custom styles to define some styles by default. e.g. fluent-button appearance.

In previous versions it works, but I have updated to latest version and faced some issues regarding define custom styles.

I see that you have docs for react docs/react-v9/contributing. I would really appreciaite if you could create the same for web-components or angular.

I have updated packages to:
Packages:

@fluentui/web-components": "2.6.1"
@microsoft/fast-element": "2.1.0"

Previous packages and implementation
Packages:

@fluentui/web-components": "2.5.16"
@microsoft/fast-element": "1.12.0"

Implementation:

provideFluentDesignSystem().register(
  fluentButton({
    attributes: (): AttributeConfiguration[] => {
      return [
        {
          property: 'appearance',
          attribute: 'appearance',
          converter: {
            toView(): string {
              return 'accent';
            },
            fromView(): string {
              return 'accent';
            },
          },
        },
      ];
    },
  }),

Validations

• Check that there isn't already an issue that requests the same feature to avoid creating a duplicate.