相关疑难解决方法(0)

我用这样的聚合物定义了一个组件:

<polymer-element name="my-component">
  <template>
    <div id='test'>CONTENT</div>
  </template>
</polymer-element>

现在我想访问阴影dom,例如:获取div id ='test'的内容

var x = $("div#test").html();

给定的代码不起作用.我可以用jquery访问阴影dom吗？

我正在使用聚合物 3 和 lit-element(2.2.1)。mwc-textfield 的版本是 0.13.0。我已经阅读了与此版本相关的文档。在此文档中，我发现我们可以为高度添加 mixin。我尝试了几种方法，但没有成功。可能是我使用的语法错误。我想降低文本字段的高度。这是我的文本字段

<mwc-textfield id="textBox" .type="text" .value=${this.title} .placeholder='' minLength="10" maxLength="256"></mwc-textfield>

和我的 css

 #textBox{
  text-transform: none;
   --mdc-theme-primary: transparent;
   --mdc-text-field-fill-color: #fff;
   --mdc-text-field-hover-line-color: #f5f5f5;
   --mwc-text-width: 100%;
   width:100%;
 }

应用的默认 css 是

:host(:not([disabled])) .mdc-text-field:not(.mdc-text-field--outlined) {
    background-color: transparent;
}
.mdc-text-field:not(.mdc-text-field--disabled) {
    background-color: rgb(245, 245, 245);
}
.mdc-text-field {
    display: flex;
    width: 100%;
}
.mdc-text-field {
    height: 56px;
    display: inline-flex;
    position: relative;
    box-sizing: border-box;
    will-change: opacity, transform, color;
    border-radius: 4px 4px 0px 0px;
    overflow: hidden;
}
.mdc-text-field {
    --mdc-ripple-fg-size:  0; …

假设我们有一些类似于动画CSS加载器的CSS代码,我们希望在所有使用Shadow DOM的Web组件中使用它们.如果我们无法像使用::shadow和那样刺穿Shadow DOM,我们如何重新使用这个CSS代码/deep/？

我们甚至无法<link />在阴影DOM中添加,所以目前我强制通过多个<style>标签复制代码.

我真的想知道这种用例的建议最佳实践是什么.

谢谢.

我试图在组件中包含css for children元素ng-content.它似乎尚未在Angular 2中实现,或者除了将css放在一般样式表中之外,有人可能有解决方案？

app.component.ts

<comp-parent>
  <comp-child></comp-child>
</comp-parent>

compParent.component.html

<div class="wrapper">
  <ng-content></ng-content>
</div>

compParent.component.css

.wrapper > comp-child {
   margin-right: 5px; <-- Not applied !!!
}

我需要在多个Polymer元素之间共享样式。创建“ styles.html”文件然后将其导入到我的其他元素中是否可以接受，还是随着应用程序的增长而开始对性能产生影响？我知道有0.5种核心样式，但是如果导入也能正常工作的话，这似乎是不必要的。

styles.html

<style>
  button {
    background: red;
  }
</style>

my-button.html

<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../styles/main-styles.html">
<link rel="import" href="../behaviors/mixins.html">

<dom-module id="my-button">
  <template>
    <button>{{text}}</button>
  </template>
</dom-module>

<script>
  Polymer({
    is: 'my-button',
    behaviors: [ButtonBehavior]
  })
</script>