---
title: Component Template and Style
---

Similar to a page, each custom component has its own `tyml` template and `tyss` style.

## Component template

Component templates are written in the same way as page templates. A node tree is generated by binding the component template with the component data and will be inserted into the location where the component is referenced.
A `<slot>` node can be provided in the component template to host the child nodes that are provided via component reference.

```xml
<!-- Component template -->
<view class="wrapper">
  <view>Internal node of the component</view>
  <slot></slot>
</view>
```

```xml
<!-- Page template where the component is referenced -->
<view>
  <component-tag-name>
    <!-- This part is added to the <slot> location of the component -->
    <view>This is inserted in the component slot</view>
  </component-tag-name>
</view>
```

Note that the custom component referenced in the template and the corresponding node name should be explicitly defined in the JSON file. Otherwise, the node will be deemed meaningless.

## Template data binding

Like an ordinary `tyml` template, data binding can also be used to pass dynamic data to child component properties.

**Sample code:**

```xml
<!-- Page template where the component is referenced -->
<view>
  <component-tag-name prop-a="{{dataFieldA}}" prop-b="{{dataFieldB}}">
    <!-- This part is added to the <slot> location of the component -->
    <view>This is inserted in the component slot</view>
  </component-tag-name>
</view>
```

In the above example, the component properties `propA` and `propB` will receive data that is passed from the page. The page can change the linked data field via `setData`.

**Note**: Only JSON-compatible data can be passed via the above data binding.

## Component tyml slot

A slot node can be provided in the component `tyml` to host the `tyml` structure that is provided by the component user.

A component's `tyml` supports one slot or multiple slots.

When using multiple slots in a component's `tyml`, you can distinguish them by different `name`.

```xml
<!-- Component template -->
<view class="wrapper">
  <slot name="before"></slot>
  <view>Internal details of the component</view>
  <slot name="after"></slot>
</view>
```

You can use the slot property to insert nodes into different slots.

```xml
<!-- Page template where the component is referenced -->
<view>
  <component-tag-name>
    <!-- This part is added to the <slot name="before"> location of the component -->
    <view slot="before">This is inserted in the slot name="before" of the component</view>
    <!-- This part is added to the <slot name="after"> location of the component -->
    <view slot="after">This is inserted in the slot name="after" of the component</view>
  </component-tag-name>
</view>
```

## Component style

The style in the `tyss` file of a component is only valid for the nodes in the `tyml` file of the component. The following things must be noted when you write a component style:

- The components and the pages that reference the components shall use the `class` selector, instead of the `id` selector (#a), property selector ([a]), and tag name selector.
- In extreme cases, unexpected behaviors may occur if the descendant selector (.a .b) is used in the components and the pages that reference the components. If so, avoid using the descendant selector.
- The child selector (.a>.b) can be only used for the `view` component and its child nodes. Unexpected behaviors may occur if it is used in other components.
- Inheritance styles, such as `font` and `color`, are inherited into the components from outside the components.
- Except inheritance styles, the styles in `app.tyss` and the styles of the pages that reference the components are invalid for custom components (unless the component style isolation option is changed).

  ```css
  #a {
  } /* Cannot be used in components */
  [a] {
  } /* Cannot be used in components */
  button {
  } /* Cannot be used in components */
  .a > .b {
  } /* It might be invalid unless .a is a view component node */
  ```

In addition, a default style can be specified for the node where the component resides by using the `:host` selector.

**Sample code:**

```css
/* Component custom-component.tyss */
:host {
  color: yellow;
}
```

```xml
<!-- Page tyml -->
<custom-component>The text here is highlighted in yellow</custom-component>
```

## Component style isolation

By default, the styles of a custom component are only affected by its `tyss`, unless in the following cases:

The tag name selector (or other special selectors) is used in the `app.tyss` or page's `tyss` to directly specify styles. This type of selector will affect the page and all components. Typically, this is not recommended.
Specify the special style isolation option `styleIsolation`.

```js
Component({
  options: {
    styleIsolation: 'isolated',
  },
});
```

This option is supported in the base library 2.0.0 and later. Valid values:

- `isolated` indicates that the style isolation is enabled. Styles specified via `class` (default styles in normal cases) are not mutually affected inside or outside custom components.
- `apply-shared` indicates that the page's `tyss` style will determine the style of custom components. However, the style specified in the `tyss` of custom components will not determine the style of the page.
- `shared` indicates that the page's `tyss` style will determine the style of custom components, and the styles specified in the `tyss` of custom components will also determine the style of the page and other custom components configured with `apply-shared` or `shared`. This option is unavailable in plug-ins.

**Pay close attention to the interaction between the styles when using the last two options.**

**Sample code:**

```js
/* Component custom-component.js */
Component({
  options: {
    addGlobalClass: true,
  },
});
```

```xml
<!-- Component custom-component.tyml -->
<text class="red-text">The color of this text is determined by styles in the app.tyss and page tyss</text>
```

```css
/* app.tyss */
.red-text {
  color: red;
}
```

## External Style Classes

Sometimes, a component may need to accept external style classes. In such cases, you can define multiple external style classes using the `externalClasses` property within the `Component` definition.

This feature can be used to achieve functionality similar to the `hover-class` attribute of the `view` component. The page can provide a style class that is assigned to the `hover-class` of the `view` component, and this style class can be defined in the page itself rather than within the implementation of the `view` component.

Note: When using regular style classes and external style classes on the same node, the priority of the two classes is undefined, so it is best to avoid this situation.

Code Example:

```js
// custom-component.js
Component({
  externalClasses: ['my-class'],
});
```

```html
<!-- custom-component.wxml -->
<custom-component class="my-class">
  The color of this text is determined by a class outside the component
</custom-component>
```

In this way, the user of the component can specify the corresponding class just like using regular attributes. Since version 2.12.0, multiple corresponding classes can be specified.