# Component Templates and Styles

Similar to pages, custom components have their own wxml Templates and wxss Style.

# Component templates

Component templates are written the same way as page templates. The node tree generated by combining the component template with the component data will be inserted into the component's reference location.

In the component template it is possible to provide a <slot> Node that is used to host the child nodes provided when the component reference is

Code example:

{% Minicode ('1udXLnmi6KY2') %}

<!-- Component templates -->
<view class="wrapper">
  <view>Here is the internal node of the component</view>
  <slot></slot>
</view>

<!-- Page templates that reference components -->
<view>
  <component-tag-name>
    <!-- This section will be placed in the component <slot> On the location of the -->
    <view>Here is what is inserted into the component slot</view>
  </component-tag-name>
</view>

Note that the custom component referenced in the template and its corresponding node name need to be specified in the json File, otherwise it will be treated as a meaningless node. In addition, the node name can also be declared asAbstract nodes。

# Template Data Binding

With the ordinary WXML Similar to templates, you can use data binding so that you can pass dynamic data to properties of child components.

Code example:

{% Minicode ('8ZhcXBme7djX') %}

<!-- Page templates that reference components -->
<view>
  <component-tag-name prop-a="{dataFieldA}}"  prop-b="{dataFieldB}}" >
    <!-- This section will be placed in the component <slot> On the location of the -->
    <view>Here is what is inserted into the component slot</view>
  </component-tag-name>
</view>

In the above example, the properties of the component propA and propB Will receive the data passed by the page. Pages can be accessed through the setData To change the bound data fields.

Note: Such data binding can only be passed JSON Compatible data. Self-base library version 2.0.9 Start, you can also include functions in the data (but these functions cannot be WXML Can only be passed to child components).

# assembly wxml of slot

In the component's wxml May contain slot Node that is used to host a component user supplied wxml Structure.

By default, a component's wxml There can only be one in slot Need to use more slot When the component can be js Declared enabled in.

Component({
  options: {
    multipleSlots: true // Enable multi-slot support in options when the component is defined
  },
  properties: { /* ... */ },
  methods: { /* ... */ }
})

At this point, it can be found in this component's wxml The use of multiple slot , with different Name To distinguish.

<!-- Component templates -->
<view class="wrapper">
  <slot name="before"></slot>
  <view>Here are the internal details of the components</view>
  <slot name="after"></slot>
</view>

When used, with slot Property to insert the node into a different slot Go.

<!-- Page templates that reference components -->
<view>
  <component-tag-name>
    <!-- This section will be placed in the component <slot name="before"> On the location of the -->
    <view slot="before">Here is the insert into the component slot Content in name = "before"</view>
    <!-- This section will be placed in the component <slot name="after"> On the location of the -->
    <view slot="after">Here is the insert into the component slot Content in name = "after"</view>
  </component-tag-name>
</view>

# Component style

Component Correspondence wxss File that takes effect only on nodes within the component wxml. When writing component styles, you need to be aware of the following:

• Components and pages that reference components cannot use the id selector#a), Property Selector ([a]) and the label name selector, use the class selector instead.
• Component and the pages that reference the component using the descendant selector.a .b) In some extreme cases, there will be unexpected performance, if encountered, please avoid using.
• Child Element Selector (.a>.b) can only be used for view Between a component and its child nodes, for other components that may cause unexpected conditions.
• Inherited styles, such as font 、 color , will be inherited from outside the component into the component.
• In addition to inherited styles, app.wxss The style of the page on which the component resides is not valid for custom components unless you change the component style isolation options.

#a { } /* Cannot be used in a component */
[a] { } /* Cannot be used in a component */
button { } /* Cannot be used in a component */
.a > .b { } /* unless .a yes view Component node, otherwise it will not necessarily take effect */

In addition, a component can specify the default style of its node, using the :host Selector (the base library needs to be included 1.7.2 Or a later version of Developer Tools support).

Code example:

{% Minicode ('jAgvwKm16bZD') %}

/* assembly custom-component.wxss */
:host {
  color: yellow
}

<!-- Page's WXML -->
<custom-component>This text is yellow.</custom-component>

# Component Style Isolation

By default, the style of a custom component is only affected by the custom component wxss The impact of... Except in the following two cases:

• Specify special style isolation options styleIsolation 。
• webview Rendering under, in app.wxss Or the page's wxss The use of a tag name selector (or some other special selector) to specify styles directly in a page affects the page and all components. This is usually not recommended.

{
  "styleIsolation": "isolated"
}

{% Minicode ('xPQhJcm37e7h') %}

Custom Components JSON to hit the target styleIsolation Options from the base library version 2.10.1 Start supporting. It supports the following values:

• isolated Indicates that style isolation is enabled, inside and outside a custom component, using the class The specified styles will not affect each other (the default in general)
• apply-shared Represents a page wxss Style will affect a custom component, but the custom component wxss The style specified in the
• shared Represents a page wxss Styles will affect the custom components, the custom component wxss The style specified in the. apply-shared or shared Of the custom components. (This option is not available in the plugin.) ）

When using the latter two, it is important to pay attention to the interaction of styles between components.

If this Component The constructor is used to construct the page , the default value is shared , and the following additional style isolation options are available:

• page-isolated Disabled on this page. app.wxss , at the same time, the page's wxss Does not affect other custom components
• page-apply-shared Disabled on this page. app.wxss , at the same time, the page wxss Style does not affect other custom components, but is set to shared The custom component of the
• page-shared Disabled on this page. app.wxss , at the same time, the page wxss Style affects other settings that are set to apply-shared or shared Is also affected by a custom component that is set to shared Effect of the custom component of the.

Component({
  options: {
    styleIsolation: 'isolated'
  }
})

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

<!-- assembly custom-component.wxml -->
<text class="red-text">The color of this text is determined by the `app.wxss` And Pages `wxss` The style definitions in the</text>

/* app.wxss */
.red-text {
  color: red
}

# External Style Classes

Start from base library version 1.9.90. Please remaining backward compatible.

Sometimes a component wants to accept an externally passed style class. At this time can be in Component Of use externalClasses The definition section defines several external style classes.

This feature can be used to implement similar view Component hover-class Properties: A page can provide a style class that gives view of hover-class , the style class itself is written on the page rather than view Implementation of the component.

Note: When using a normal style class and an external style class on the same node, the precedence of the two classes is undefined, so it is best to avoid this.

Code example:

/* assembly custom-component.js */
Component({
  externalClasses: ['my-class']
})

<!-- assembly custom-component.wxml -->
<custom-component class="my-class">The color of this text is determined by the class Decision</custom-component>

This way, the user of the component can specify the class , just like using ordinary properties. in 2.7.1 Later, a plurality of corresponding class 。

Code example:

{% Minicode ('rbgNNKmE6bZK') %}

<!-- Page's WXML -->
<custom-component my-class="red-text" />
<custom-component my-class="large-text" />
<!-- The following writing requires the base library version 2.7.1 Above -->
<custom-component my-class="red-text large-text" />

.red-text {
  color: red
}
.large-text {
  font-size: 1. 5em 
}

# A style that references a page or parent component

Start from base library version 2.9.2. Please remaining backward compatible.

Even if style isolation is enabled isolated , the component can still partially reference the style of the page on which the component is located or the style of the parent component.

For example, if the page wxss Defined in:

.blue-text {
  color: blue
}

In this component you can use the `` To refer to the style of this class:

<view class="blue-text"> This text is blue. </view>

If in a component's parent component wxss Defined in:

.red-text {
  color: red
}

In this component you can use the `` To refer to the style of this class:

<view class="red-text"> This text is red. </view>

It is also possible to use a number of consecutive `` To refer to the style in the ancestor component.

Note: If the component is a relatively independent, generic component, use an external style class instead of directly referencing the parent component or page style.

# Virtualization Component Nodes

Start from base library version 2.11.2. Please remaining backward compatible.

By default, the node that customizes the component itself is a "normal" node on which you can set class style , Animation, flex Layout, etc., just as the ordinary view Like component nodes.

<!-- Page's WXML -->
<view style="display: flex">
  <!-- By default, this is a normal node -->
  <custom-component style="color: blue flex: 1">Blue, full width</custom-component>
</view>

But sometimes custom components don't want the node itself to be stylized, responsive. flex Layout, etc., but rather want the first layer nodes inside the custom component to respond flex The layout or style is entirely determined by the custom component itself.

In this case, you can make this custom component "virtual":

Component({
  options: {
    virtualHost: true
  },
  properties: {
    style: { // definition style Properties can be obtained style The value set on the
      type: String,
    }
  },
  externalClasses: ['class'], // It is possible to class Set to externalClasses
})

This way, you can place flex Put into a custom component:

<!-- Page's WXML -->
<view style="display: flex">
  <!-- If you set the virtualHost , the style on the node will be invalidated -->
  <custom-component style="color: blue">It's not blue.</custom-component>
</view>

<!-- custom-component.wxml -->
<view style="flex: 1">
  Full width
  <slot></slot>
</view>

It is important to note that custom component nodes on the class style And animations will no longer be in effect, but can still:

• will style Defined as properties Property to get the style The value set on
• will class Defined as externalClasses External style classes enable custom components wxml Can be used class Value.

Code example:

{% Minicode ('AlV9fEmF7Dh8') %}