# Using-web-components
# Using Mark Web Components
This guide covers how to use Mark web components in your application, including properties, events, methods, and slots.
## Properties
Properties (or attributes) can be set on the component to configure its behavior. For example:
```html
Click me
```
### Boolean Attributes
When using Mark web components (or any web components) in HTML or frameworks like Vue, it is important to understand how boolean attributes (such as `disabled`, `selected`, etc.) are handled:
- In HTML, the **presence** of a boolean attribute (e.g., ``) means `true`, regardless of its value. For example, `` will still be disabled.
- To **enable** a component, either omit the attribute or, in Vue, use a binding: `:disabled="false"`.
- To **disable** a component, use `disabled`, `disabled="true"`, or `:disabled="true"`.
- **Do not use** `disabled="false"` or `selected="false"` in your markup, as these will still be interpreted as `true` by the browser and most frameworks.
- Mark components use a property converter to handle string values like `"true"` and `""` (empty string) as `true`, but this cannot override the browser's native behavior.
**Summary Table:**
{`
| Markup | Result |
| ---------------------------- | --------------------- |
| | Disabled |
| | Disabled |
| | Disabled (do not use) |
| | Disabled |
| | Enabled |
| | Enabled |
`}
**Accessibility:**
This approach ensures the correct disabled state is reflected in the DOM and to assistive technologies, meeting WCAG 2.2 AA requirements.
**Best Practice:**
- Use `:disabled` or `:selected` bindings in Vue for dynamic state.
- Omit the attribute for the default (enabled/unselected) state.
- Use the attribute (or set to `true`) for the active (disabled/selected) state.
## Events
Web components emit events that you can listen to. For example:
```html
Click me
```
This listens for the `click` event on the button and calls the `handleClick` function when it occurs.
## Methods
Some components expose methods that you can call. You can access these methods by getting a reference to the element. For example:
```javascript
const dialogElement = document.querySelector("#my-dialog");
dialogElement.showModal();
```
This calls the `showModal` method on a dialog component.
## Slots
Slots allow you to insert content into specific places in a component. For example:
```html
Modal title
Modal content goes here
Cancel
Save
```
## Using Icons
Icons can be used either as standalone elements or within components:
```html
Click me
```
## Vue Integration
### Configuring Vue for Web Components
#### Vite Configuration
If you're using Vite, add the following configuration to your `vite.config.ts`:
```typescript
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
export default defineConfig({
plugins: [
vue({
template: {
compilerOptions: {
isCustomElement: (tag) => tag.includes("m-"),
},
},
}),
],
});
```
#### Vue Application Configuration
Add the following configuration to your main Vue file (usually `main.js` or `main.ts`):
```javascript
import { createApp } from "vue";
import App from "./App.vue";
// Import all Mark components
import "@mark/ui";
import "@mark/icons";
import "@mark/fonts";
import "@mark/tokens/css";
const app = createApp(App);
app.mount("#app");
```
### Using Mark Components in Vue
After the global configuration, you can use Mark components in your Vue templates:
```typescript
Click me
Hello
```