收藏
回答

BUG slot插槽位置渲染错误,样式不调用组件样式

框架类型 问题类型 API/组件名称 终端类型 微信版本 基础库版本
小程序 Bug button 工具 6.7.3/7.0.0 2.4.3

- 当前 Bug 的表现(可附上截图)

组件,注意slot位置在



引用之后插入slot



渲染后的页面,变成了同级元素,而不是`button-list`子元素.

而且填充slot的元素没有引用button.wxss的样式。需要在引用页面在写一遍。很鸡肋




- 预期表现



- 复现路径

普通编译即可


- 提供一个最简复现 Demo

已提供


最后一次编辑于  2018-12-28
回答关注问题邀请回答
收藏

4 个回答

  • LastLeaf
    LastLeaf
    2018-12-28

    WXML 面板以 shadow root 方式展示节点树,实际位置应该是无误的。


    如果你往 slot 里面放一个节点,这个节点的 class 并不应用组件的 wxss 样式,而是应用这个组件所在的父组件或页面的样式。换而言之,组件的 wxss 只影响真正写在组件 wxml 里面的节点,不影响 slot 下的节点。

    2018-12-28
    有用
    回复 1
    • 隆金
      隆金
      2018-12-28

      看二楼谢谢

      2018-12-28
      回复
  • 陟上晴明。
    陟上晴明。
    2021-08-16

    传入slot位置错误的问题,可以试试取消【以shadow-root形式展示组件】的设置:

    微信开发者工具 - 详情(编辑器右上角 版本管理 右边) - 本地设置 - 以 shadow-root 形式展示自定义组件(取消勾选)

    2021-08-16
    有用
    回复 1
    • 2022-02-09
      我的开发者工具没这个选项是怎么回事
      2022-02-09
      回复
  • 章巍
    章巍
    2020-05-11

    这个问题最后修复了吗?有没有人能提供一些更优的方案解决插槽样式丢失问题?

    2020-05-11
    有用
    回复
  • 隆金
    隆金
    2018-12-28

    那这样子我又要额外定义多个class去配置这个样式,能不能使用组件样式?像vue一样呢?


    另外其实---这句话有个矛盾

    组件的 wxss 只影响真正写在组件 wxml 里面的节点,不影响 slot 下的节点。

    我这么改动

    里边的.button样式变成如下

    ```

    .button-list view {

    background: #1fc768;

    padding: 25rpx 10rpx;

    border-radius: 10rpx;

    }

    ```

    是能正确应用到这个样式的

    你代码片段参考一下谢谢。

    2018-12-28
    有用
    回复 5
    • LastLeaf
      LastLeaf
      2018-12-28

      抱歉,目前还没有好的方法让组件 slot 内的节点接受组件 wxss 的样式。你可以考虑用 @import 将样式引入组件的使用者中。


      关于后面的一点,建议阅读一下刚刚更新过的 文档 的“使组件接受全局样式”一节,里面有提及关于标签名选择器的事项。

      2018-12-28
      回复
    • 隆金
      隆金
      2018-12-29回复LastLeaf



      小程序最新库,2.4.3头部适配貌似有问题。更新之后头部tab为fixed变成这样子。

      原低版本。图如下。


      2018-12-29
      回复
    • LastLeaf
      LastLeaf
      2018-12-29回复隆金

      疑似是和 navigationStyle 开始支持按页面配置有关系。看下这个配置项?

      2018-12-29
      回复
    • 隆金
      隆金
      2019-01-07回复LastLeaf

      不是这个配置的问题,之前版本没有配置这个。

      2019-01-07
      回复
    • 视频号小店技术助手 - cunjin
      视频号小店技术助手 - cunjin
      2019-01-14回复隆金

      有代码片段么?我看下

      2019-01-14
      回复
登录 后发表内容