个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-12-03 03:06:14 24 4
gpt4 key购买 nike

我正在尝试设置作为内容传递的 PaperMenu 节点的自定义 CSS 属性。--paper-menu-background-color:green;在主文档中工作，或者当 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>

尽管它有效，但我不希望 main.html 中的以下内容: 
<style is="custom-style">
     :root{--paper-menu-background-color:green;}
</style>

my_menu_bar.html 
<dom-module id="my-menu-bar">
  <style>
    :host ::content paper-menu{
      display:inline-block;
      top:0;
      vertical-align: text-top;
    --paper-menu-background-color:green;
    <!--Does not work, setting colors via script-->
    }

  </style>

  <template>
    <div id='my_menu_bar_div'>
    <content></content>
    </div>
  </template>
</dom-module>

下面的css生效但不是'--paper-menu-background-color:green;'

display:inline-block; top:0; vertical-align: text-top;



通过 dart 脚本和反射设置背景颜色: 
@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)');
      }
    });
  }
}

就我个人而言，我喜欢通过 css 编写脚本，但喜欢了解执行此操作的标准方法以及为什么会发生这种情况。

编辑

感谢 Günter Zöchbauer 的评论，该功能现在简化为: 
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);
    }
  }

至于包装内容标签，它没有用，或者我还在做一些愚蠢的事情。

编辑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>

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

编辑3

你好，君特·佐赫鲍尔。
为了回应您的“这看起来不正确。”，我仔细检查了。
但我认为 css 变量 sham 是罪魁祸首。我的意思是，正如我首先所说，标准 CSS 指令正在处理分布式内容。

Under shady DOM, the <content> tag doesn’t appear in the DOM tree. Styles are rewritten to remove the ::content pseudo-element, and any combinator immediately to the left of ::content.



描述有点欠缺，但从示例中我假设它告诉我在::content 伪元素的右侧和左侧都有选择器，我认为我一直都有这个权利。
深入挖掘需要 javascript 知识，而我没有，我知道 javascript 是 web 的基础，但我不是 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>

编辑4

经过漫长而徒劳的搜索，我相信我找到了。

http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom-301/?redirect_from_locale=pt

What's conceptually bizarre about insertion points is that they don't physically move DOM. The host's nodes stay intact. Insertion points merely re-project nodes from the host into the shadow tree. It's a presentation/rendering thing: "Move these nodes over here" "Render these nodes at this location."


You cannot traverse the DOM into a <content>.

如果我可以从阴影 dom 中为外部 light dom 设置 CSS 变量的值，那将破坏封装。虽然 Color 等属于内容伪元素，但 css 变量和 mixins 是用于将值插入 css 占位符的宏。

最佳答案

要使这项工作在阴暗的 DOM(默认)中工作，您需要包装 <content>标记在另一个标记中，并将此包装器包含在选择器中。
见 https://www.polymer-project.org/1.0/docs/devguide/styling.html#styling-distributed-children-content (更多细节的第一个例子)
如果这仍然不起作用，则可能是 CSS 变量 shim 的限制。

<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>

关于dart - 如何为分布式内容设置自定义 CSS 属性，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34548956/

24 4 0
文章推荐： dart - 1.0的聚合物 Dart 测试
文章推荐： Dart Polymer 1.0 有没有办法在客户端和服务器端使用一个 "refectable"类？
文章推荐： dart - 如何将一个angular2-dart包中的组件导入到另一个angular2-dart包中
文章推荐： gradle - 约定优于配置
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com