自定义元素内的 <div flex> 不弯曲答案

【问题标题】：<div flex> inside custom-element not flexing自定义元素内的 <div flex> 不弯曲
【发布时间】：2015-10-12 21:11:26
【问题描述】：

对于 Polymer Dart（1.0 之前），我有一个自定义元素 my-page，它具有以下 HTML：

<div vertical layout>
  <div> ... stuff ... </div>
  <div> ... stuff ... </div>
  <my-panel> ... panel stuff ... </my-panel>
</div>

元素 HTML 创建单个 div 如下：

<div flex>
  <content></content>
</div>

但是，我的面板并没有“弯曲”到我的页面末尾。有没有办法在不包装 my-panel is its own

的情况下让它工作？

【问题讨论】：

我猜不是。我认为这需要更改 Polymer 样式（添加 ::content 或类似内容）。像<my-panel flex> 这样将flex 属性添加到我的面板本身怎么样？
这确实有效，但我希望深入到 my-panel 元素以继续“弯曲”。我尝试了 ::content 等的各种组合，但我没有找到任何有效的方法。我只是不知道这是否可能。
我假设 vertical 和 layout 以 Polymer 集成样式为目标。这些可能需要使用::content 进行扩展才能使其正常工作。
你试过使用iron-flex-layout的课程吗？ elements.polymer-project.org/guides/flex-layout

【解决方案1】：

您尝试做的事情听起来不是一个好习惯。元素应该被封装并且能够独立存在。在这种情况下，放置一些标记并期望某些父元素完成它似乎是不正确的。

另外，请注意flex 仅适用于您设置 flexbox 的直接子级，在这种情况下通过 Polymer 的布局属性。

最后，请注意，Polymer 在元素的 Shadow DOM 中添加了额外的标记（至少在 1.0 之前），因此不要期望在该元素的阴影深处的 div 与您定义的弹性框相关联。

我建议找到一种更简洁的方式来进行布局。让 div 围绕自定义元素通常是有意义的。如果您需要它是有条件的，请使用<template if...。

【讨论】：