[英]Polymer - styling childnodes of host
first, i searched for similar questions but haven't found a solution for my problem, which is basically simple, i guess. 首先,我搜索了类似的问题,但没有找到解决我问题的方法,我想这基本上很简单。 :)
:)
I built a simple image-slider for clearing up the whole concepts of web components for myself with a real world example. 我构建了一个简单的图像滑块,以一个真实的例子为我自己清除了Web组件的整个概念。
My custom component is made out of 5 components and a headline. 我的自定义组件由5个组件和一个标题组成。
stage-slider
stage-element
h1
stage-button
stage-teaserdock
stage-teaser
The component slides fine. 组件滑动良好。 Now i wanted to add teaser navigation at the bottom.
现在我想在底部添加预告片导航。 So first i tried adding a single teaser item.
所以首先我尝试添加一个预告片项目。
Ok.. what i want to do is access an element inside of the stage-slider: 好吧..我想做的是访问stage-slider内部的元素:
<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../stage-element/stage-element.html">
<link rel="import" href="../stage-button/stage-button.html">
<polymer-element name="stage-slider" attributes="items slideInterval">
<template>
<style>
:host {
width: 960px;
height: 485px;
position: absolute;
top: 50%;
left: 50%;
margin: -242px 0px 0px -480px;
overflow: hidden;
display: block;
}
:content .teaser
{
left: 30px;
}
</style>
<div id="wrapper">
<template id="slider" repeat="{{item in items}}">
<stage-element headline="{{item.headline}}"
image="{{item.image}}"
buttonLabel="{{item.buttonLabel}}"
buttonTargetWindow="{{item.buttonTargetWindow}}"
buttonTargetURL="{{item.buttonTargetURL}}">
</stage-element>
</template>
<content class="teaser" select="stage-teaser"></content>
</div>
</template>
<script src="./libs/TweenLite/easing/EasePack.min.js"></script>
<script src="./libs/TweenLite/plugins/CSSPlugin.min.js"></script>
<script src="./libs/TweenLite/TweenLite.min.js"></script>
</polymer-element>
<script>
Polymer('stage-slider',
{
slideInterval: 7000,
items: [],
index: 0,
ready: function ()
{
console.log('-----------------');
console.log('stage slider ready!');
},
attached: function ()
{
console.log('-----------------');
console.log('stage slider attached!');
this.$.wrapper.style.width = (960 * (this.items.length)).toString() + "px";
//
if (this.items.length > 1 && this.slideInterval != 0)
{
var that = this;
setInterval(function ()
{
that.startSliding(that);
}, this.slideInterval
);
}
},
startSliding: function (shadowDom)
{
console.log('More children than 1 -> SLIDE EM!');
TweenLite.to(shadowDom.$.wrapper, 1.5, {
marginLeft: -960,
ease: Expo.easeInOut,
onStart: function ()
{
console.log('tween started'); //, this = ', this);
},
onComplete: function ()
{
// console.log('tween complete');
// console.log(shadowDom.$.wrapper.getElementsByTagName('stage-slide')[0]);
shadowDom.$.wrapper.style.marginLeft = 0;
shadowDom.$.wrapper.appendChild(shadowDom.$.wrapper.getElementsByTagName('stage-element')[0]);
}});
}
});
</script>
This is how my markup looks like: 这是我的标记的样子:
<stage-slider slideInterval="0"
items='[
{
"headline" : "Test headline",
"image" : "img/slide0.jpg",
"buttonLabel" : "Test buttonlabel",
"buttonTargetURL" : "http://www.google.com"
}
]'>
<stage-teaser class="teaser"
image="img/teaser0.jpg"
headline="Test teasertext"
targetURL="http://google.com">
</stage-teaser>
</stage-slider>
So there is a stage-teaser element nested inside my stage-slider element. 因此,在我的stage-slider元素内嵌套了一个stage-teaser元素。
I thought i have to distribute it to the content tag inside my template element. 我以为我必须将其分发到模板元素内的content标签。 Which is why there is a content tag like this:
这就是为什么会有这样的内容标签的原因:
<content class="teaser" select="stage-teaser"></content>
It displays the teaser item correctly. 它正确显示预告片项目。
But now i want to define its css from within the slider component. 但是现在我想从滑块组件中定义其CSS。 This is where i am totally stuck..
这是我完全卡住的地方。
I can access the element itself with :host, thats good. 我可以使用:host访问元素本身,那就好。
But how do i access the content element, which renders the teaser? 但是我如何访问呈现预告片的content元素?
i tried the following: 我尝试了以下方法:
:host(stage-teaser), :host(.teaser), :host(#teaser), :content .teaser, :host(:content .teaser), :host(stage-teaser)、: host(.teaser)、: host(#teaser)、: content .teaser,:host(:content .teaser),
as you can see.. i am kinda stuck. 如您所见..我有点卡住了。 :-/
:-/
any idea would be cool! 任何想法都很棒!
thanks, Rob 谢谢,罗布
I suspect that the issue you're seeing is just a typo. 我怀疑您看到的问题只是错字。 Instead of
:content
you want ::content
. 而不是
:content
您需要::content
。 Here's a jsbin showing a simple example: http://jsbin.com/mijifiru/1/edit and for more info on styling web components with the shadow DOM, check out this article: http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom-201/ 这是一个显示简单示例的jsbin: http ://jsbin.com/mijifiru/1/edit,有关使用阴影DOM设置Web组件样式的更多信息,请查看本文: http ://www.html5rocks.com/cn / tutorials / webcomponents / shadowdom-201 /
If that doesn't solve the issue it would be helpful if you reduced your code down to a Minimal, Complete, and Verifiable example , and for bonus points do so in an online editor like jsbin. 如果那不能解决问题,将代码简化为最小,完整和可验证的示例将非常有帮助,要获得加分,请使用jsbin这样的在线编辑器进行。
<polymer-element name='my-container' noscript>
<template>
<style>
::content .innerContent {
background-color: red;
}
</style>
Shadow Dom
<content></content>
</template>
</polymer-element>
<my-container>
<div class='innerContent'>Contained matching Light DOM</div>
<div>Contained unmatched Light DOM</div>
</my-container>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.