`<template>` renders to a real DOM element that cause some CSS layout fails on Baidu

[malash]

Description

This is a well-known issue that Baidu renders as a real DOM element which cause CSS layout fails.

For example,

.flex {
    display: flex;
    flex-direction: row;
}

.flex1 {
    flex: 1;
    border: 2rpx solid black;
}

<template name="item">
    <view class="flex1">hello</view>
</template>

<view class="flex">
    <template is="item"></template>
    <template is="item"></template>
    <template is="item"></template>
</view>

It will renders to

The swan-template element may break CSS layout like flex layout.

Reproduct link

swanide://fragment/0f355b2398c107d572e99d92606106381623814792130

Reproduct steps

1. Open the link
2. The flex: 1 doesn't work

Impact

Many front-end frameworks like GojiJS / Taro 3 / Remax use a lots of <template> elements as the basic of render engine.

This issue cause more unexpected CSS issues on Baidu than other platforms.

Temporary solution

Developers can write CSS styles for swan-template to solve this issue. But it is not a usual solution.

.flex swan-template {
  flex: 1;
}