I created a custom element and I take html from its <content> and on created I use Polymer.dom(this.root).appendChild(paperItem) (paperItem was created via iteration on HTML I'd received from <content>) to insert that into local DOM. Well, I can't style <paper-item> from template's <style> tag no matter what I do. Even Polymer.updateStyles(); doesn't help. What am I getting wrongly?
Here explain how to apply styles to distributed children.
<dom-module id="my-element">
<template>
<style>
:host {
display: block;
border: 1px solid red;
}
#child-element {
background: yellow;
}
/* 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 id="child-element">In local DOM!</div>
<div class="content-wrapper"><content></content></div>
</template>
<script>
Polymer({
is: 'my-element'
});
</script>
</dom-module>
<my-element>
<div class="special">Here will have a different css </div>
</my-element>
Related
Let's say I have html element with shadow root.
<my-element>
#shadow-root
<div class='need-target-this' />
</my-element>
How can I target div inside shadow root?
I've tried to use
:host(my-element.need-target-this)
But it didn't help. What am I missing here?
Style shadowDOM with <style> tags inside shadowDOM
also see ::part: https://developer.mozilla.org/en-US/docs/Web/CSS/::part
also see: ::slotted CSS selector for nested children in shadowDOM slot
customElements.define("my-element",class extends HTMLElement{
constructor(){
super().attachShadow({mode:"open"}).innerHTML = `
<style>
.target { background:hotpink; border: 5px dashed green }
::slotted(span) {
color : red;
}
</style>
<slot name="title"></slot>
<span part="mytarget" class='target' />`;
}
connectedCallback(){
this.shadowRoot.querySelector("span").innerHTML = `Web Component!`;
}
});
<style>
* { font: 42px Arial }
span {
background:gold; /* slot content styled by Global CSS! */
}
.target { border: 5px solid blue } /* does NOT style shadowDOM! */
my-element::part(mytarget) {
font-size: 150%;
}
</style>
<my-element class="target"><span slot="title">Hello</span>
</my-element>
In case it will help some one: I wrapped my element with div added ref and then went
const shadow = ref.current.querySelector('my-element').shadowRoot
const target = shadow?.querySelector('.need-target-this')
target.style.whatever = 'value';
I'm trying to achieve a simple 'media-query' behavior on my custom element using <iron-media-query> from the Polymer API.
Assume i have a container with some text on top the top, and below it is the main content..
My goal is to write media queries so that when the element is displayed on a big screen (just bigger than 768px for my testing), i can do some simple margin and padding modifications to the elements local DOM styles.
I just can't make it work.
Is there something i completely missed here ?
<link rel="import" href="../../bower_components/polymer/polymer.html"/>
<link rel="import" href="../../bower_components/iron-media-query/iron-media-query.html" />
<iron-media-query query="(max-width:768px)" query-matches="{{isMobilePhone}}"></iron-media-query>
<template is="dom-if" if="{{isMobilePhone}}">
<style>
#title {
color: #000000;
font-size: 1.8em;
}
</style>
</template>
<template>
<style>
:host {
background-color: gray;
flex-direction: column;
margin: auto;
margin-top: 40px;
display: flex;
width: 90%;
flex-grow: 1;
max-width: 1300px;
}
#title {
color: #7DB8C9;
font-size: 1.3em;
}
.content-wrapper {
height: 100%;
}
</style>
<p id="title">
[[title]]
</p>
<div class="content-wrapper">
<content select=".content"></content>
</div>
</template>
<script>
Polymer({
is: 'content-container',
properties: {
title: String,
isMobilePhone: Boolean
},
listeners: {
'tap': 'spit'
},
spit: function() {
console.log("BOOL: " + this.isMobilePhone);
}
});
</script> </dom-module>
I also tried copying the whole template ( with styles and markup ) inside the 'if' template and just modify the styles i want, but it doesn't work either.
(Everything is inside the same file, which is content-container.html)
One of the easiest ways to achieve this (which is the one used in the iron-media-query demo) is to use Polymer's annotated attribute bindings together with attribute selectors.
A simple example of an element's template would look like this
<template>
<style>
.content-wrapper ::content {
color: blue;
}
.content-wrapper[mobile-layout] ::content {
color: green;
}
</style>
<iron-media-query query="(max-width:768px)" query-matches="{{isMobilePhone}}"></iron-media-query>
<div class="content-wrapper" mobile-layout$="[[isMobilePhone]]">
<content></content>
</div>
</template>
Here's a fiddle showing it in action
<style> tags anywhere inside a <dom-module> (even dom-if) are applied to the element immediately (as seen in this demo), so putting <style> inside a dom-if would not give you conditional styles.
And if the only purpose of using <iron-media-query> was to add a conditional <style>, you don't need the element at all. Just use the media query normally in CSS:
<style>
...
#title {
color: #7DB8C9;
font-size: 1.3em;
}
#media (max-width:768px) {
#title {
color: #000000;
font-size: 1.8em;
}
}
</style>
codepen
I had a wokring app with some :host styles on custom elements built with Polymer 5.5. Now, I'm converting this to Polymer 1.0 but run into this weird issue:
Styles defined with :host are not applied. For testing purposes I took the example right from the documentation:
<dom-element id="my-element">
<style>
:host {
display: block;
border: 1px solid red;
}
#child-element {
background: yellow;
}
</style>
<template>
<div id="child-element">In local DOM!</div>
<content></content>
</template>
<script>
Polymer({
is: 'my-element'
});
</script>
</dom-element>
When I render (latest chrome) it does have a yellow background but does NOT have a 1px red border, which it should have.
Any idea what's going on here? There are no js warnings or other clues...
You should be using dom-module instead of dom-element:
<dom-module id="my-element">
<style>
:host {
display: block;
border: 1px solid red;
}
#child-element {
background: yellow;
}
</style>
<template>
<div id="child-element">In local DOM!</div>
<content></content>
</template>
<script>
Polymer({
is: 'my-element'
});
</script>
</dom-module>
I have a web app using AngularJS and Bootstrap. In a page I want to have two components with different styles. For example:
<div ng-include="'./component/header.html'"></div>
<div ng-include="'./component/header.html'"></div>
I want these 2 divs have different styles. My question is, 1) How can I encapsulate the style code into header.html? 2) How can I use less to define the style?
Thank you in advance!
For the first question:
Why not give the 2 divs a different class and then adopt the CSS like that:
<div class="first" ng-include="'./component/header.html'"></div>
<div class="second" ng-include="'./component/header.html'"></div>
CSS:
.first table {
/* style definitions */
}
.second table{
/* style definitions */
}
Like in this Snippet
You can add an id or class to each ng-include and style under that selector with css or less. It makes no difference what preprocessor or lack of, you use.
angular.module('app', []);
function HomeCtrl() {
}
* {
box-sizing: border-box;
}
.header {
padding: 20px;
border: 1px solid #000;
}
#header1 {
background: red;
}
#header2 {
background: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
<div ng-include="'header.html'" id="header1" class="header"></div>
<div ng-include="'header.html'" id="header2" class="header"></div>
<script type="text/ng-template" id="header.html">
header
</script>
</div>
I want to add two core-icon buttons one right-top of a (custom) post-card polymer component and the other at the bottom-center. How do I do this? The current code applies to both the core-icon-buttons (below). Is there a way to qualify the styling of core-icon-button by the icon type?
<template>
<style>
....
core-icon-button {
content: '.icon clear';
position: absolute;
top: 3px;
right: 3px;
color: blue;
}
....
</style>
<core-icon-button icon="clear"></core-icon-button>
<core-icon-button icon="thumb-up"></core-icon-button>
</template>
You are free to use standard well-known HTML elements’ ids/classes for that:
<template>
<style>
.clearbtn { color: white }
#thumbupbtn { left: 100px }
</style>
<core-icon-button class="clearbtn" icon="clear"></core-icon-button>
<core-icon-button id="thumpupbtn" icon="thumb-up"></core-icon-button>
</template>
You might as well use CSS selectors for that:
<style>
core-icon-button[icon="clear"] { color: white }
core-icon-button[icon="thumb-up"] { left: 100px }
</style>
Hope it helps.