[Polymer] Custom Elements: Styling
Code:
<dom-module id="business-card">
<template>
<div class="card">
<h1>Joe Maddalone</h1>
<h2>Instructor</h2>
<h3>egghead.io</h3>
</div>
<style>
.card{
background-color: #e8e8e8;
box-shadow: 0 0 1px #e8e8e8;
position: relative;
font-family: monospace;
display: flex;
width: 350px;
height: 200px;
flex-flow: column wrap;
margin: 20px;
}
.card:before, .card:after {
z-index: -1;
position: absolute;
content: "";
bottom: 15px;
left: 10px;
width: 50%;
top: 80%;
max-width:300px;
background: rgba(0, 0, 0, 0.7);
box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
transform: rotate(-3deg);
}
.card:after {
transform: rotate(3deg);
right: 10px;
left: auto;
}
.card h1,.card h2,.card h3 {
font-weight: normal;
color: var(--custom-text-color,--text-color)
}
.card h1 {
flex:4;
padding-top: 50px;
font-size: 24px;
align-self: center;
}
.card h2 {
flex:3;
margin-top: -30px;
align-self: center;
font-size: 12px;
}
.card h3 {
flex:1;
font-size: 14px;
align-self: flex-end;
margin-right: 20px;
}
</style>
</template>
<script>
Polymer( {
is: "business-card"
} )
</script>
</dom-module>
Using parent compoment in css :host
- remove the <div class="host"></div>
- change .card class to :host, which can be consider as <div class=":host"><h1>..</h1><h2>..</h2><h3>..</h3></div>
<dom-module id="business-card">
<template>
<h1>Joe Maddalone</h1>
<h2>Instructor</h2>
<h3>egghead.io</h3>
<style>
:host {
background-color: #e8e8e8;
box-shadow: 0 0 1px #e8e8e8;
position: relative;
font-family: monospace;
display: flex;
width: 350px;
height: 200px;
flex-flow: column wrap;
margin: 20px;
} :host:before, :host:after {
z-index: -1;
position: absolute;
content: "";
bottom: 15px;
left: 10px;
width: 50%;
top: 80%;
max-width: 300px;
background: rgba(0, 0, 0, 0.7);
box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
transform: rotate(-3deg);
} :host:after {
transform: rotate(3deg);
right: 10px;
left: auto;
} h1, h2, h3 {
font-weight: normal;
color: var(--custom-text-color, --text-color)
} h1 {
flex: 4;
padding-top: 50px;
font-size: 24px;
align-self: center;
} h2 {
flex: 3;
margin-top: -30px;
align-self: center;
font-size: 12px;
} h3 {
flex: 1;
font-size: 14px;
align-self: flex-end;
margin-right: 20px;
}
</style>
</template>
<script>
Polymer( {
is: "business-card"
} )
</script>
</dom-module>
Create variable in css:
:host{
--card-color: #e8e8e8;
--text-color: #222;
}
:host {
background-color: var(--card-color);
box-shadow: 0 0 1px var(--card-color);
...
}
Default value:
background-color: var(--custom-card-color, --card-color);
box-shadow: 0 0 1px var(--custom-card-color, --card-color);
--card-color will be the default value if --custom-card-color not exists.
------------------------------
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Polymer</title>
<script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="bower_components/polymer/polymer.html">
<link rel="import" href="my-card.html">
</head>
<body>
<my-card></my-card>
</body>
</html>
my-card.html:
<link rel="import" href="./business-card.html">
<dom-module id="my-card">
<template>
<business-card></business-card>
<business-card class="red"></business-card>
<style>
.red{
--custom-card-color: red;
--custom-text-color: white;
}
</style>
</template>
<script>
Polymer( {
is: "my-card"
} )
</script>
</dom-module>
busniess-card.html:
<dom-module id="business-card">
<template>
<h1>Joe Maddalone</h1>
<h2>Instructor</h2>
<h3>egghead.io</h3>
<style>
:host{
--card-color: #e8e8e8;
--text-color: #222;
}
:host {
background-color: var(--custom-card-color, --card-color);
box-shadow: 0 0 1px var(--custom-card-color, --card-color);
position: relative;
font-family: monospace;
display: flex;
width: 350px;
height: 200px;
flex-flow: column wrap;
margin: 20px;
} :host:before, :host:after {
z-index: -1;
position: absolute;
content: "";
bottom: 15px;
left: 10px;
width: 50%;
top: 80%;
max-width: 300px;
background: rgba(0, 0, 0, 0.7);
box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
transform: rotate(-3deg);
} :host:after {
transform: rotate(3deg);
right: 10px;
left: auto;
} h1, h2, h3 {
font-weight: normal;
color: var(--custom-text-color, --text-color)
} h1 {
flex: 4;
padding-top: 50px;
font-size: 24px;
align-self: center;
} h2 {
flex: 3;
margin-top: -30px;
align-self: center;
font-size: 12px;
} h3 {
flex: 1;
font-size: 14px;
align-self: flex-end;
margin-right: 20px;
}
</style>
</template>
<script>
Polymer( {
is: "business-card"
} )
</script>
</dom-module>
[Polymer] Custom Elements: Styling的更多相关文章
- Web Components之Custom Elements
什么是Web Component? Web Components 包含了多种不同的技术.你可以把Web Components当做是用一系列的Web技术创建的.可重用的用户界面组件的统称.Web Com ...
- 自定义元素(custom elements)
记录下自定义html自定义元素的相关心得: 浏览器将自定义元素保留在 DOM 之中,但不会任何语义.除此之外,自定义元素与标准元素都一致 事实上,浏览器提供了一个HTMLUnknownElement, ...
- [HTML5] Render Hello World Text with Custom Elements
Custom elements are fun technology. In this video, you will learn how to set one up and running in l ...
- 使用custom elements和Shadow DOM自定义标签
具体的api我就不写 官网上面多 如果不知道这个的话也可以搜索一下 目前感觉这个还是相当好用的直接上码. <!DOCTYPE html> <html lang="en&q ...
- window 属性:自定义元素(custom elements)
概述 Web Components 标准非常重要的一个特性是,它使开发者能够将HTML页面的功能封装为 custom elements(自定义标签),而往常,开发者不得不写一大堆冗长.深层嵌套的标 ...
- HTML Custom Elements & valid name
HTML Custom Elements & valid name valid custom element name https://html.spec.whatwg.org/multipa ...
- HTML Custom Elements (v1)
HTML Custom Elements (v1) https://developers.google.com/web/fundamentals/web-components/customelemen ...
- Knockoutjs:Component and Custom Elements(翻译文章)
Knockoutjs 的Components 是一种自定义的组件,它以一种强大.简介的方式将你自己的ui代码组织成一种单独的.可重用的模块,自定义的组件(Component)有以下特点: 1.可以替代 ...
- webAssmebly实现js数组排序 使用custom elements和Shadow DOM自定义组件
直接上码了……………… .wat源码 (module (type $t0 (func (param i32 i32))) (type $t1 (func (result i32))) (type $t ...
随机推荐
- python运行时间计算之timeit
timeit.timeit(stmt='pass', setup='pass', timer=<default timer>, number=1000000) stmt:statement ...
- Android Http请求失败解决方法
1.MainActivity.java 文件中的onCreate方法改成如下: @SuppressLint("NewApi") @Override protected void o ...
- ORA-16018: cannot use LOG_ARCHIVE_DEST with LOG_ARCHIVE_DEST_n or DB_RECOVERY_FILE_DEST【error收集】
之前一直没有注意一个事情, 关于设置archive归档路径设置的问题. 设置数据库为归档模式的命令: 1.首先要切换到mount状态: 2.执行alter system archivelog; 3.查 ...
- Eclipse自动生成文档注释
/** *这种格式的注释就是文档注释 */ 快捷键是alt+shift+j,将光标放在类名,变量名,方法名上,按快捷键.
- 高放的c++学习笔记之重载运算与类型转换
▲基本概念 (1)重载运算符是具有特殊名字的函数,它们的名字又operator和其后要定义的运算符号共同构成.. (2)对于一个运算符号来说它或者是类的成员,或者至少含有一个类类型的参数. (3)我们 ...
- MySQL查询优化处理
查询的生命周期的下一步是将一个sql转化成一个执行计划,MySQL再依照这个执行计划和存储引擎进行交互.这包括多个子阶段:解析sql,预处理,优化sql执行计划.这个过程中任何错误(例如语法错误)都可 ...
- Spring4.0学习笔记(5) —— 管理bean的生命周期
Spring IOC 容器可以管理Bean的生命周期,Spring允许在Bean生命周期的特定点执行定制的任务 Spring IOC 容器对Bean的生命周期进行管理的过程: 1.通过构造器或工厂方法 ...
- web前端开发框架搜集
Web应用框架(Web application framework)是一种电脑软件框架,用来支持动态网站.网络应用程序及网络服务的开发.这种框架有助于减轻网页开发时共通性活动的工作负荷,例如许多框架提 ...
- HTML5数据存储
介绍两种对象使用方法: sessionStorage方法如果关闭了浏览器,这个保存的数据就丢失. 1.sessionStorage 保存数据:sessionStorage.setItem(key,va ...
- php 数组操作类(整合 给意见)
数组操作函数整理: /* 将一个二维数组按照指定字段的值分组 * * @param array $arr * @param string $keyField * * @return array */ ...