Fatal编程技术网
  • dart/
  • Dart 如何为分布式内容设置自定义CSS属性

Dart 如何为分布式内容设置自定义CSS属性

dart

Dart 如何为分布式内容设置自定义CSS属性,dart,dart-polymer,Dart,Dart Polymer,我试图设置作为内容传递的PaperMenu节点的自定义CSS属性 ——纸张菜单背景色：绿色在主文档中工作，或者当PaperMenu是我的自定义组件的一部分且不在distributedNodes（）中时工作 我有以下main.html <html> <head> <meta charset="utf-8"> <link rel="import" href="packages/polymer_elements/paper_menu_button.ht

我试图设置作为内容传递的PaperMenu节点的自定义CSS属性
——纸张菜单背景色：绿色在主文档中工作，或者当PaperMenu是我的自定义组件的一部分且不在distributedNodes（）中时工作

我有以下main.html


<html>
<head>
  <meta charset="utf-8">
  <link rel="import" href="packages/polymer_elements/paper_menu_button.html">
  <link rel="import" href="packages/polymer_elements/paper_menu.html">
    <link rel="import" href="packages/polymer_elements/paper_submenu.html">
  <link rel="import" href="packages/polymer_elements/paper_item.html">
  <link rel="import" href="packages/polymer_elements/paper_icon_button.html">
  <link rel="import" href="packages/polymer_elements/paper_badge.html">
  <link rel="import" href="packages/my_p/my_menu_bar.html">
</head>
<body unresolved>
<my-menu-bar>
    <paper-menu>
        <paper-submenu>
            <paper-item class="menu-trigger">Topics</paper-item>
            <paper-menu raised class="menu-content">
                <paper-item>Topic 1</paper-item>
                <paper-item>Topic 2</paper-item>
                <paper-item>Topic 3</paper-item>
            </paper-menu>
        </paper-submenu>
    </paper-menu>
</my-menu-bar>
  <script type="application/dart" src="index.dart"></script>
  <script src="packages/browser/dart.js"></script>
</body>
</html>


至于包装内容标签，它不起作用，或者我正在做一些愚蠢的事情

编辑2
嗨，甘特·泽克鲍尔

如果你能帮我确认一下，那就太好了

任何事情都很难确定。

我的菜单栏：


<dom-module id="my-menu-bar">
  <style>
    :host ::content paper-menu{
      display:inline-block;
      top:0;
      backgroundColor:black;
      --paper-menu-background-color:green;
      vertical-align: text-top;
    }
    :host ::content .special{
      <!--setting class name did nothing-->
      display:inline-block;
      top:0;
      backgroundColor:black;
      --paper-menu-background-color:green;
      vertical-align: text-top;
    }
    :host div#my_menu_bar ::content paper-menu{
      --paper-menu-background-color:green;
    }
    :host #my_menu_bar_div > ::content paper-menu{
      --paper-menu-background-color:green;
    }
    :host #my_menu_bar_div ::content paper-menu{
      --paper-menu-background-color:green;
    }
    #my_menu_bar_div ::content paper-menu{
      --paper-menu-background-color:green;
    }
    ::content paper-menu{
      --paper-menu-background-color:green;
    }
    paper-menu{
      --paper-menu-background-color:green;
    }
    :root ::content paper-menu{
      --paper-menu-background-color:green;
    }
    :root #my_menu_bar_div ::content paper-menu{
      --paper-menu-background-color:green;
    }
    :host ::content .paper-menu{
      --paper-menu-background-color:green;
    }
    :host ::content #paper-menu{
      --paper-menu-background-color:green;
    }

  </style>

  <template>
    <style>
      :host ::content paper-menu{
      display:inline-block;
      top:0;
      backgroundColor:black;
      --paper-menu-background-color:green;
      vertical-align: text-top;
      }
      :host ::content .special{
      <!--setting class name did nothing-->
      display:inline-block;
      top:0;
      backgroundColor:black;
      --paper-menu-background-color:green;
      vertical-align: text-top;
      }
      :host div#my_menu_bar ::content paper-menu{
      --paper-menu-background-color:green;
      }
      :host #my_menu_bar_div > ::content paper-menu{
      --paper-menu-background-color:green;
      }
      :host #my_menu_bar_div ::content paper-menu{
      --paper-menu-background-color:green;
      }
      #my_menu_bar_div ::content paper-menu{
      --paper-menu-background-color:green;
      }
      ::content paper-menu{
      --paper-menu-background-color:green;
      }
      paper-menu{
      --paper-menu-background-color:green;
      }
      :root ::content paper-menu{
      --paper-menu-background-color:green;
      }
      :root #my_menu_bar_div ::content paper-menu{
      --paper-menu-background-color:green;
      }
      :host ::content .paper-menu{
      --paper-menu-background-color:green;
      }
      :host ::content #paper-menu{
      --paper-menu-background-color:green;
      }
    </style>
    <div id='my_menu_bar_div'>
    <content></content>
    </div>
  </template>
</dom-module>




：主机：：内容纸菜单{
显示：内联块；
排名：0；
背景颜色：黑色；
--纸张菜单背景色：绿色；
垂直对齐：文本顶部；
}
：host：：content.special{
显示：内联块；
排名：0；
背景颜色：黑色；
--纸张菜单背景色：绿色；
垂直对齐：文本顶部；
}
：主机div#我的菜单(工具栏)：：内容纸菜单{
--纸张菜单背景色：绿色；
}
：主机#我的菜单bar div>：：内容纸菜单{
--纸张菜单背景色：绿色；
}
：主机#我的菜单(工具栏)分区：：内容纸菜单{
--纸张菜单背景色：绿色；
}
#我的菜单工具栏分区：：内容纸菜单{
--纸张菜单背景色：绿色；
}
：：内容纸菜单{
--纸张菜单背景色：绿色；
}
纸质菜单{
--纸张菜单背景色：绿色；
}
：root:：内容纸菜单{
--纸张菜单背景色：绿色；
}
：root#我的菜单(工具栏)div:：内容纸菜单{
--纸张菜单背景色：绿色；
}
：主机：：内容。纸张菜单{
--纸张菜单背景色：绿色；
}
：主机：：内容#纸张菜单{
--纸张菜单背景色：绿色；
}
：主机：：内容纸菜单{
显示：内联块；
排名：0；
背景颜色：黑色；
--纸张菜单背景色：绿色；
垂直对齐：文本顶部；
}
：host：：content.special{
显示：内联块；
排名：0；
背景颜色：黑色；
--纸张菜单背景色：绿色；
垂直对齐：文本顶部；
}
：主机div#我的菜单(工具栏)：：内容纸菜单{
--纸张菜单背景色：绿色；
}
：主机#我的菜单bar div>：：内容纸菜单{
--纸张菜单背景色：绿色；
}
：主机#我的菜单(工具栏)分区：：内容纸菜单{
--纸张菜单背景色：绿色；
}
#我的菜单工具栏分区：：内容纸菜单{
--纸张菜单背景色：绿色；
}
：：内容纸菜单{
--纸张菜单背景色：绿色；
}
纸质菜单{
--纸张菜单背景色：绿色；
}
：root:：内容纸菜单{
--纸张菜单背景色：绿色；
}
：root#我的菜单(工具栏)div:：内容纸菜单{
--纸张菜单背景色：绿色；
}
：主机：：内容。纸张菜单{
--纸张菜单背景色：绿色；
}
：主机：：内容#纸张菜单{
--纸张菜单背景色：绿色；
}


我尝试了调试器，似乎CSS变量sham和相关值在initPolymer（）和标准CSS指令（如“display:inline block；”）之前生效

编辑3
嗨，甘特·泽克鲍尔。
为了回应你的“这看起来不对”，我仔细检查了一下。
但我认为这是罪魁祸首。我的意思是，正如我首先说的，标准CSS指令正在处理分布式内容。

在shady DOM下，
标记不会出现在DOM树中。
重写样式以删除：：content伪元素和任何
紧接：：content左侧的组合器

描述有点欠缺，但从示例中，我假设它告诉我在：：content伪元素的左右两侧都有选择器，我想我一直都是这样。

深入挖掘需要JavaScript知识，而我没有这样的知识，我知道JavaScript是Web的基础，但我不是网络程序员，想在深度潜水之前覆盖广泛，所以我会放弃这一点。

<dom-module id="my-menu-bar">

  <template>
    <style>
      :host .content-wrapper > ::content div{
        /* These CSS variables do not work*/
        --paper-menu-background-color:blue;
        --paper-item{
          background-color:red;
        }
        /*The below works alright*/
        /*background-color:green;*/
        /*color:red;*/
      }
      :host .content-wrapper > ::content .special{
        /* This and the above should have
        the same scope of selection, but this one
        does not work at all.
        Encapsulation playing a trick idk.*/
        /*background-color:green;*/
        /*color:red;*/
      }
      :host ::content div{
        /*works*/
        /*background-color:green;*/
      }
      :host ::content {
      /* does not work*/
        /*background-color:green;*/
      }

      :host ::content paper-menu{
        /*works but custom property and color*/
        /*color:blue;*/
          display:inline-block;
          top:0;
          vertical-align: text-top;
      }
      :host ::content paper-item{
        /*works*/
        /*color:blue;*/
      }
    </style>
    <div class='content-wrapper'>
    <content></content>
    </div>
  </template>
</dom-module>




：host.content wrapper>：：content div{
/*这些CSS变量不起作用*/
--纸张菜单背景颜色：蓝色；
--纸品{
背景色：红色；
}
/*下面的工作正常*/
/*背景颜色：绿色*/
/*颜色：红色*/
}
：host.content包装器>：：content.special{
/*这一点和上述问题都应该得到解决
相同的选择范围，但这一个
根本不起作用。
封装玩了一个idk的把戏*/
/*背景颜色：绿色*/
/*颜色：红色*/
}
：主机：：内容div{
/*工作*/
/*背景颜色：绿色*/
}
：主机：：内容{
/*不起作用*/
/*背景颜色：绿色*/
}
：主机：：内容纸菜单{
/*工作，但自定义属性和颜色*/
/*颜色：蓝色*/
显示：内联块；
排名：0；
垂直对齐：文本顶部；
}
：主机：：内容纸张项目{
/*工作*/
/*颜色：蓝色*/
}


编辑4
经过漫长而徒劳的寻找，我相信我找到了它



插入点在概念上的奇怪之处在于它们没有
实际移动DOM。主机的节点保持不变。插入点
只需将节点从主机重新投影到阴影树中即可。这是一个
演示/渲染内容：“将这些节点移到此处”“渲染”
这些节点位于此位置。”


不能将DOM遍历到一个对象中。


如果我可以从阴影dom中为外部灯光dom设置CSS变量的值，这将破坏封装。当Color etc属于内容伪元素时，css变量和mixin是插入va的宏

@HtmlImport('my_menu_bar.html')
library m_p.lib.my_menu_bar;
import 'package:polymer/polymer.dart';
import 'dart:html';
import 'package:polymer_elements/paper_input.dart';
import 'package:polymer_elements/paper_menu.dart';
import 'package:polymer_elements/paper_submenu.dart';
import 'package:polymer_elements/paper_item.dart';
import 'dart:async';
import 'package:web_components/web_components.dart';
import 'dart:mirrors';


@PolymerRegister('my-menu-bar')
class MyMenuBar extends PolymerElement {
  MyMenuBar.created() : super.created() { }
  void _recursive_set_style(var e, String attrName, String value){
//    print(reflect(e).type.superclass.toString());
    if(!(reflect(e).type.isSubtypeOf(reflectClass(HtmlElement))))
      return;
//    print('ya, it\'s subtype of HtmlElement');
    InstanceMirror helperMirror = reflect(e.style);
    var methodsAr  = helperMirror.type.instanceMembers;
    var sym = new Symbol(attrName);
    print(methodsAr[sym]);
    if(null !=methodsAr[sym]){
      helperMirror.setField(sym,value);
    }
    for(var ie in e.children){
      _recursive_set_style(ie,attrName,value);
    }
   }

  attached() {
    super.attached();
    new Future(() {
      ContentElement ce = Polymer.dom(this.root)
          .querySelector('content');
      PolymerDom dom = Polymer.dom(ce);
      List<Node> nodes = dom.getDistributedNodes();
      nodes.removeWhere((n)=>!(n is PaperMenu));
      //Setting colors
      updateStyles();
      for(var e in nodes){
        _recursive_set_style(e,'backgroundColor','rgb(156, 58, 53)');
      }
    });
  }
}



void _recursive_set_style(var e, String attrName, String value){
    e.attributes[attrName]=value;
    for(var ie in e.children){
      _recursive_set_style(ie,attrName,value);
    }
  }



<dom-module id="my-menu-bar">
  <style>
    :host ::content paper-menu{
      display:inline-block;
      top:0;
      backgroundColor:black;
      --paper-menu-background-color:green;
      vertical-align: text-top;
    }
    :host ::content .special{
      <!--setting class name did nothing-->
      display:inline-block;
      top:0;
      backgroundColor:black;
      --paper-menu-background-color:green;
      vertical-align: text-top;
    }
    :host div#my_menu_bar ::content paper-menu{
      --paper-menu-background-color:green;
    }
    :host #my_menu_bar_div > ::content paper-menu{
      --paper-menu-background-color:green;
    }
    :host #my_menu_bar_div ::content paper-menu{
      --paper-menu-background-color:green;
    }
    #my_menu_bar_div ::content paper-menu{
      --paper-menu-background-color:green;
    }
    ::content paper-menu{
      --paper-menu-background-color:green;
    }
    paper-menu{
      --paper-menu-background-color:green;
    }
    :root ::content paper-menu{
      --paper-menu-background-color:green;
    }
    :root #my_menu_bar_div ::content paper-menu{
      --paper-menu-background-color:green;
    }
    :host ::content .paper-menu{
      --paper-menu-background-color:green;
    }
    :host ::content #paper-menu{
      --paper-menu-background-color:green;
    }

  </style>

  <template>
    <style>
      :host ::content paper-menu{
      display:inline-block;
      top:0;
      backgroundColor:black;
      --paper-menu-background-color:green;
      vertical-align: text-top;
      }
      :host ::content .special{
      <!--setting class name did nothing-->
      display:inline-block;
      top:0;
      backgroundColor:black;
      --paper-menu-background-color:green;
      vertical-align: text-top;
      }
      :host div#my_menu_bar ::content paper-menu{
      --paper-menu-background-color:green;
      }
      :host #my_menu_bar_div > ::content paper-menu{
      --paper-menu-background-color:green;
      }
      :host #my_menu_bar_div ::content paper-menu{
      --paper-menu-background-color:green;
      }
      #my_menu_bar_div ::content paper-menu{
      --paper-menu-background-color:green;
      }
      ::content paper-menu{
      --paper-menu-background-color:green;
      }
      paper-menu{
      --paper-menu-background-color:green;
      }
      :root ::content paper-menu{
      --paper-menu-background-color:green;
      }
      :root #my_menu_bar_div ::content paper-menu{
      --paper-menu-background-color:green;
      }
      :host ::content .paper-menu{
      --paper-menu-background-color:green;
      }
      :host ::content #paper-menu{
      --paper-menu-background-color:green;
      }
    </style>
    <div id='my_menu_bar_div'>
    <content></content>
    </div>
  </template>
</dom-module>



<dom-module id="my-menu-bar">

  <template>
    <style>
      :host .content-wrapper > ::content div{
        /* These CSS variables do not work*/
        --paper-menu-background-color:blue;
        --paper-item{
          background-color:red;
        }
        /*The below works alright*/
        /*background-color:green;*/
        /*color:red;*/
      }
      :host .content-wrapper > ::content .special{
        /* This and the above should have
        the same scope of selection, but this one
        does not work at all.
        Encapsulation playing a trick idk.*/
        /*background-color:green;*/
        /*color:red;*/
      }
      :host ::content div{
        /*works*/
        /*background-color:green;*/
      }
      :host ::content {
      /* does not work*/
        /*background-color:green;*/
      }

      :host ::content paper-menu{
        /*works but custom property and color*/
        /*color:blue;*/
          display:inline-block;
          top:0;
          vertical-align: text-top;
      }
      :host ::content paper-item{
        /*works*/
        /*color:blue;*/
      }
    </style>
    <div class='content-wrapper'>
    <content></content>
    </div>
  </template>
</dom-module>



You cannot traverse the DOM into a <content>.



<dom-module id="my-element">
  <template>
    <style>
      /* styling elements distributed to content (via ::content) requires */
      /* selecting the parent of the <content> element for compatibility with */
      /* shady DOM . This can be :host or a wrapper element. */
      .content-wrapper > ::content .special {
        background: orange;
      }
    </style>
    <div class="content-wrapper"><content></content></div>
  </template>
</dom-module>