like this
<polymer-element name="ele-polyrow" extends="div">
</polymer-element>
is it possible to add style of ele-polyrow element.
Sure. Use the :host pseudo-class from inside the element's template. There are a couple of things to note, though:
If you extend a built-in element like div, to use the element you need to use
<div is="ele-polyrow"> rather than just <ele-polyrow>.
If the element doesn't include a constructor, you need to add the noscript
attribute, and Polymer will automatically register it for you.
Put these things together and you get:
<polymer-element name="ele-polyrow" extends="div" noscript>
<template>
<!-- shadow DOM for the element -->
<style>
:host {
outline: 2px solid red;
}
</style>
<!-- display any children -->
<content></content>
</template>
</polymer-element>
<div is="ele-polyrow">Hey there polyrow!</div>
Styling guide: http://www.polymer-project.org/articles/styling-elements.html
Styling reference: http://www.polymer-project.org/docs/polymer/styling.html
Related
I have 2 different components in my Vuejs/Nuxtjs application: pages/Create.vue and pages/Design.vue. I have the stylesheet assets/css/styles.css.
Within the stylesheet styles.css I have a style: overflow:hidden;. This style sheet has been added only to my Design.vue component and not to my Create.vue component. However, I see that this style is impacting my Create.vue without even including it.
If I modify to overflow:auto; then everything works perfectly in Create.vue but Design.vue gets messed up.
I tried following things but still had no luck in making both components work perfectly:
Tried adding <style scoped> to both my Create.vue & Design.vue then also styles in Design.vue is getting messed up.
Tried adding overflow:hidden; to my Create.vue but that's not working either.
Tried adding scoped to both components then also its not working perfectly for me.
Following is the code I have from both components:
styles.css
html,
body {
overflow: hidden;
}
Create.vue:
<template>
<div>
<!-- My code with overflowing the page-->
</div>
</template>
<script>
export default {
}
</script>
<style>
/* OTHER STYLES */
</style>
Design.vue:
<template>
<div>
<!-- My code with overflowing the page-->
</div>
</template>
<script>
export default {
}
</script>
<style>
#import "~/assets/css/styles.css";
/* OTHER STYLES */
</style>
This is a problem resulting from trying to keep my html semantics as correct as possible.
I have a parent button that does both a function in the same page, and acts as parent tag for a big container that nests an anchor -- which redirects to another page -- and a div tag that also acts as a parent for another button that is suppose to perform some actions.
<button>
<div id="the-most-big-container"
<div>
<button> do some action </button>
</div>
</div>
</button>
I tried nesting the button, gave it a class and id and none of the properties that I apply to the class and the id get performed on the child button, more Also the child button gets completely out of the big container and lays itself in the DOM just like it is a complete independent tag not nested by any other tag.
[Update]
Apparently this is prohibited to nest a button inside another, but furthermore I would like an explanation to why the nested button's behavior being not responsive to the css styles, and how exactly it is laying itself regarding the DOM now, is it now a complete independent tag by itself or what ?
Also now I will be forced to change the parent button tag into any other tag so that I can nest child buttons inside. I would like a suggestion for a substitute tag for the parent button tag
ex: I could change the parent button into a div tag,
but I need a tag that would be more descriptive semantically (something other than just a div),I had that parent button in the first place to act as a toggle button so that when I click it it displays and hides the most-big-container-div.
It is not valid to put a <button> inside a <button> element.
In the W3C recomendation for the button element you can read:
Content model:
Phrasing content, but there must be no interactive content descendant.
[source: w3.org (emphasis mine)]
Interactive content includes:
a
audio (if the controls attribute is present)
button
embed
iframe
img (if the usemap attribute is present)
input (if the type attribute is not in the hidden state)
keygen
label
object (if the usemap attribute is present)
select
textarea
video (if the controls attribute is present)
With CSS, we can style it to look like a button inside a button:
.buttons-wrapper {
position: relative;
}
.seemingly-outer-button {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
height: 40px;
width: 100%;
background: black;
color: lightblue;
}
.seemingly-inner-button {
position: absolute;
top: 8px;
bottom: 8px;
height: 24px;
left: 20px;
color: lightcyan;
background: brown;
}
<div>
<h4>Try clicking these buttons:</h4>
<div class="buttons-wrapper">
<button class="seemingly-outer-button" id="outer" onclick="alert('outer')">
The Seemingly Outer Button
</button>
<button class="seemingly-inner-button" id="inner" onclick="alert('inner')">
The Inner Button
</button>
</div>
</div>
React example on StackBlitz.
You can not do this. A button is not meant to contain other elements.
However, you can style a div element to have the look and the feel of a button, here is what it looks like with bootstrap:
<!DOCTYPE html>
<html>
<head>
<title></title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>
<div class="btn btn-default">
outer button
<br />
<button class="btn btn-primary">
inner button
</button>
</div>
</body>
</html>
I am trying to figure out how I can define a dynamic class in a parent element, then set the name of the class on a property of a client element and then have the client element use the style for something.
So what options do I have?
Cheers
The example I am trying to beat into shape is here:
<!doctype html>
<html>
<head>
<script src='bower_components/webcomponentsjs/webcomponents-lite.js'></script>
<link rel='import' href='bower_components/polymer/polymer.html'>
</head>
<body unresolved>
<dom-module id='my-element'>
<style>
/* Here is where I would like to dynamically add this
.somerandomname {
#apply(--the-class);
}
where 'somerandomname' is just some name tying to together with the div below
*/
.somerandomname {
#apply(--the-class);
}
</style>
<template>
<!--
Below the class will actually be class$ allowing data binding to the somerandomname
A note here is that there will be many tags that needs mixins and I do not know in advance
what they are called, but the data provided to the custom element includes the class that should
be used for the tag
-->
<div class='somerandomname'>Show me the color</div>
</template>
</dom-module>
<script>
Polymer({
is: 'my-element',
properties: {
myclass: {
type: String,
value: ''
}
}
});
</script>
<dom-module id='base-page'>
<style>
my-element {
--the-class: {
background-color: red;
};
}
</style>
<template>
<my-element myclass='--the-class'></my-element>
</template>
</dom-module>
<script>
Polymer({
is: 'base-page'
});
</script>
<base-page></base-page>
</body>
It seems you're a bit confused about how mixins and custom css properties, I hope this helps with that.
First of all, you don't really need any Polymer properties to make this thing work, so, the myclass property in my-element's definition isn't really needed for this.
Considering that, you naturally don't need the myclass="--the-class" bit either, everything should work fine without those two things.
Then again, bear in mind that since you defined in base-page's style that all my-element children will have that mixin applied to them it
Here's a slightly modified version of your code which should illustrate how the mixins are applied (and here's a working fiddle for it)
<dom-module id="my-element">
<template>
<style>
.customized {
#apply(--customized-div);
}
</style>
<div class="customized">
This div is customized
</div>
<div>
This div isn't customized
</div>
</template>
</dom-module>
<dom-module id="base-page">
<template>
<style>
my-element { /*This applies to all my-element children*/
--customized-div: {
color: red;
};
}
my-element.green { /*This only applies to those with the green class*/
--customized-div: {
color: green;
};
}
</style>
Child 1
<my-element></my-element>
<br>
Child 2
<my-element class="green"></my-element>
</template>
</dom-module>
<script>
Polymer({
is: 'my-element'
});
Polymer({
is: 'base-page'
});
</script>
<base-page></base-page>
I've got a question related to styling in Polymer. I have a responsive element which has different stylings depending on the width of the screen. If the width is 720 or greater, it should have the styling that is marked with "--specific styling 2--". If it isn't, it should have the "--specific styling 2--". It should always have the "--common styling--".
<dom-module>
<template>
<style>
:host {
--common styling--
}
</style>
<iron-media-query query="min-width: 720px" query-matches="{{isWide}}"></iron-media-query>
<template is="dom-if" if="{{!isWide}}">
<style>
:host {
--specific styling 1--
}
</style>
</template>
<template is="dom-if" if="{{isWide}}">
<style>
:host {
--specific styling 2--
}
</style>
</template>
</template>
</dom-module>
If I have the code as above, it always uses the "--specific styling 2--". Is there some way to change this to the wanted behaviour?
Bart
I am newbie for polymer. I just tried to add but getting blank screen. Did I missed any script or something?
Head
<script src="bower_components/polymer/polymer.js"></script>
<script src="bower_components/webcomponentsjs/webcomponents.js"></script>
<link rel="import" href="bower_components/core-drawer-panel/core-drawer-panel.html">
body
<core-drawer-panel transition id="core_drawer_panel" touch-action>
<section id="section" drawer></section>
<section id="section1" main></section>
</core-drawer-panel>
<script>
Polymer({
});
</script>
Actually, this is exactly how it should be.
Look in your inspector and you will see that there is a core-drawer-panel element with two section's. The core-drawer-panel doesn't have any visual and is just a container that holds your sub components.
Basically you need to put something in the sections to see something in the browser :)
Add the following to your code:
<style>
core-drawer-panel /deep/ section {
border:1px solid red;
}
</style>
This will visually highlight the sections.