# ShadyCSS
ShadyCSS provides a library to simulate ShadowDOM style encapsulation (ScopingShim), a shim for the proposed CSS mixin `@apply` syntax (ApplyShim), and a library to integrate document-level stylesheets with both of the former libraries (CustomStyleInterface).
## Requirements
ShadyCSS requires support for the `<template>` element, ShadowDOM, MutationObserver, Promise, and Object.assign
## Loading
ShadyCSS can be used by loading the ScopingShim, ApplyShim, CustomStyleInterface, or any combination of those.
The most-supported loading order is:
1. ScopingShim
1. ApplyShim
1. CustomStyleInterface
All libraries will expose an object on `window` named `ShadyCSS` with the following interface:
```js
ShadyCSS = {
prepareTemplate(templateElement, elementName, elementExtension){},
styleElement(element){},
styleSubtree(element, overrideProperties){},
styleDocument(overrideProperties){},
getComputedStyleValue(element, propertyName){
return // style value for property name on element
},
nativeCss: Boolean,
nativeShadow: Boolean
}
```
## About ScopingShim
ScopingShim provides simulated ShadyDOM style encapsulation, and a shim for CSS Custom Properties.
ScopingShim works by rewriting style contents and transforming selectors to enforce scoping.
Additionally, if CSS Custom Properties is not detected, ScopingShim will replace CSS Custom Property usage with realized values.
### Example:
Here's an example of a custom element when Scoping Shim is not needed.
```html
<my-element>
<!-- shadow-root -->
<style>
:host {
display: block;
}
#container slot::slotted(*) {
color: gray;
}
#foo {
color: black;
}
</style>
<div id="foo">Shadow</div>
<div id="container">
<slot>
<!-- span distributed here -->
</slot>
</div>
<!-- /shadow-root -->
<span>Light</span>
</my-element>
```
becomes:
```html
<style scope="my-element">
my-element {
display: block;
}
#container.my-element > * {
color: gray;
}
#foo.my-element {
color: black;
}
</style>
<my-element>
<div id="foo">Shadow</div>
<div id="container">
<span>Light</span>
</div>
</my-element>
```
## About ApplyShim
ApplyShim provides a shim for the `@apply` syntax proposed at https://tabatkins.github.io/specs/css-apply-rule/, which expands the definition CSS Custom Properties to include objects that can be applied as a block.
This is done by transforming the block definition into a set of CSS Custom Properties, and replacing uses of `@apply` with consumption of those custom properties.
### Status:
The `@apply` proposal has been abandoned in favor of the ::part/::theme [Shadow Parts spec](https://tabatkins.github.io/specs/css-shadow-parts/). Therefore, the ApplyShim library is deprecated and provided only for backwards compatibility. Support going forward will be limited to critical bug fixes.
### Known Issues:
* Mixin properties cannot be modified at runtime.
* Nested mixins are not supported.
* Shorthand properties are not expanded and may conflict with more explicit properties. Whenever shorthand notations are used in conjunction with their expanded forms in `@apply`, depending in the order of usage of the mixins, properties can be overridden. This means that using both `background-color: green;` and `background: red;` in two separate CSS selectors
can result in `background-color: transparent` in the selector that `background: red;` is specified.
```css
#nonexistent {
--my-mixin: {
background: red;
}
}
```
with an element style definition of
```css
:host {
display: block;
background-color: green;
@apply(--my-mixin);
}
```
results in the background being `transparent`, as an empty `background` definition replaces
the `@apply` definition.
For this reason, we recommend avoiding shorthand properties.
### Example:
Here we define a block called `--mixin` at the document level, and apply that block to `my-element` somewhere in the page.
```css
html {
--mixin: {
border: 2px solid black;
background-color: green;
}
}
my-element {
border: 1px dotted orange;
@apply --mixin;
}
```
becomes:
```css
html {
--mixin_-_border: 2px solid black;
--mixin_-_background-color: green;
}
my-element {
border: var(--mixin_-_border, 1px dotted orange);
background-color: var(--mixin_-_background-color);
}
```
## About CustomStyleInterface
CustomStyleInterface provides API to process `<style>` elements that are not inside of
ShadowRoots, and simulate upper-boundary style scoping for ShadyDOM.
To add document-level styles to ShadyCSS, one can call `CustomStyleInterface.addCustomStyle(styleElement)` or `CustomStyleInterface.addCustomStyle({getStyle: () => styleElement})`
An example usage of the document-level styling api can be found in `examples/document-style-lib.js`, and another example that uses a custom element wrapper can be found in `examples/custom-style-element.js`
### Example:
```html
<style class="document-style">
html {
--content-color: brown;
}
</style>
<my-element>This text will be brown!</my-element>
<script>
CustomStyleInterface.addCustomStyle(document.querySelector('style.document-style'));
</script>
```
Another example with a wrapper `<custom-style>` element
```html
<custom-style>
<style>
html {
--content-color: brown;
}
</style>
</custom-style>
<script>
class CustomStyle extends HTMLElement {
constructor() {
CustomStyleInterface.addCustomStyle(this);
}
getStyle() {
return this.querySelector('style');
}
}
</script>
<my-element>This this text will be brown!</my-element>
```
Another example with a function that produces style elements
```html
<my-element>This this text will be brown!</my-element>
<script>
CustomStyleInterface.addCustomStyle({
getStyle() {
const s = document.createElement('style');
s.textContent = 'html{ --content-color: brown }';
return s;
}
});
</script>
```
## Usage
To use ShadyCSS:
1. First, call `ShadyCSS.prepareTemplate(template, name)` on a
`<template>` element that will be imported into a `shadowRoot`.
2. When the element instance is connected, call `ShadyCSS.styleElement(element)`
3. Create and stamp the element's shadowRoot
4. Whenever dynamic updates are required, call `ShadyCSS.styleSubtree(element)`.
5. If a styling change is made that may affect the whole document, call
`ShadyCSS.styleDocument()`.
The following example uses ShadyCSS and ShadyDOM to define a custom element.
```html
<template id="myElementTemplate">
<style>
:host {
display: block;
padding: 8px;
}
#content {
background-color: var(--content-color);
}
.slot-container ::slotted(*) {
border: 1px solid steelblue;
margin: 4px;
}
</style>
<div id="content">Content</div>
<div class="slot-container">
<slot></slot>
</div>
</template>
<script>
// Use polyfill only in browsers that lack native Shadow DOM.
window.ShadyCSS && ShadyCSS.prepareTemplate(myElementTemplate, 'my-element');
class MyElement extends HTMLElement {
connectedCallback() {
window.ShadyCSS && ShadyCSS.styleElement(this);
if (!this.shadowRoot) {
this.attachShadow({mode: 'open'});
this.shadowRoot.appendChild(
document.importNode(myElementTemplate.content, true));
}
}
}
customElements.define('my-element', MyElement);
</script>
```
## Type Extension elements
ShadyCSS can also be used with type extension elements by supplying the base
element name to `prepareTemplate` as a third argument.
### Example
```html
<template id="myElementTemplate">
<style>
:host {
display: block;
padding: 8px;
}
#content {
background-color: var(--content-color);
}
.slot-container ::slotted(*) {
border: 1px solid steelblue;
margin: 4px;
}
</style>
<div id="content">Content</div>
<div class="slot-container">
<slot></slot>
</div>
</template>
<script>
windo
没有合适的资源?快使用搜索试试~ 我知道了~
温馨提示
【说明】 此adb工具包中包含了adb disable-verity命令,这里免费提供给大家使用,具体可看本人的文章 ”/system/bin/sh: disable-verity: not found 的解决方案“ 【使用方式】 platform-tools解压后即可使用。在cmd中通过cd命令进入到platform-tools文件夹中,然后输入adb /? 可查看说明。如果你电脑上已经有adb,并且配置了环境变量,可以用这个文件进行替换,或者只替换adb.exe 【其他说明】 platform-tools路径默认在:C:\Users\你的电脑用户名\AppData\Local\Android\Sdk\platform-tools
资源推荐
资源详情
资源评论
收起资源包目录
(免费下载)adb应用程序,包含特殊的 adb disable-verity 命令 (1713个子文件)
adb_profile_chrome 407B
adb_profile_chrome_startup 5KB
atrace_data 18KB
atrace_data_raw 18KB
atrace_data_stripped 18KB
atrace_extracted_tgids 17KB
atrace_extracted_threads 111B
atrace_fixed_tgids 19KB
atrace_missing_tgids 19KB
atrace_procfs_dump 23KB
AUTHORS 292B
dataurl-base64-singlequotes.out.b 83KB
dataurl-base64-doublequotes.out.b 83KB
dataurl-base64-noquotes.out.b 83KB
dataurl-base64-twourls.out.b 4KB
dataurl-base64-eof.out.b 4KB
dataurl-realdata-doublequotes.out.b 3KB
dataurl-realdata-singlequotes.out.b 3KB
dataurl-realdata-noquotes.out.b 3KB
dataurl-realdata-yuiapp.out.b 2KB
dataurl-base64-linebreakindata.out.b 2KB
dataurl-nonbase64-singlequotes.out.b 1KB
dataurl-nonbase64-noquotes.out.b 1KB
dataurl-nonbase64-doublequotes.out.b 1KB
color.out.b 719B
atgroup_10.out.b 450B
atgroup_09.out.b 447B
atgroup_11.out.b 446B
atgroup_08.out.b 445B
atgroup_07.out.b 442B
atgroup_05.out.b 436B
atgroup_06.out.b 436B
dataurl-dbquote-font.out.b 358B
dataurl-singlequote-font.out.b 356B
dataurl-noquote-multiline-font.out.b 354B
atgroup_04.out.b 308B
opacity-filter.out.b 293B
bug2527991.out.b 199B
atgroup_02.out.b 181B
color-simple.out.b 180B
preserve-case.out.b 171B
atgroup_03.out.b 168B
special-comments.out.b 159B
atgroup_01.out.b 147B
bug2527974.out.b 141B
media-empty-class.out.b 141B
comment_01.out.b 129B
media-multi.out.b 121B
font-face.out.b 109B
box-model-hack.out.b 100B
preserve-strings.out.b 95B
zeros.out.b 89B
pseudo-first.out.b 88B
concat-charset.out.b 85B
dollar-header.out.b 79B
bug2528034.out.b 75B
media-test.out.b 68B
preserve-new-line.out.b 65B
charset-media.out.b 62B
webkit-transform.out.b 59B
background-position.out.b 56B
string-in-comment.out.b 56B
border-none.out.b 50B
first_02.out.b 47B
decimals.out.b 45B
star-underscore-hacks.out.b 44B
ie5mac.out.b 31B
atgroup_00.out.b 29B
comment.out.b 27B
comment_00.out.b 26B
pseudo.out.b 25B
first_01.out.b 25B
first_00.out.b 23B
url_09.out.b 22B
url_06.out.b 21B
bug2527998.out.b 20B
url_05.out.b 15B
url_00.out.b 14B
url_04.out.b 13B
url_03.out.b 13B
url_08.out.b 13B
url_01.out.b 12B
url_07.out.b 12B
url_02.out.b 11B
escape_05.out.b 10B
escape_04.out.b 9B
escape_03.out.b 6B
escape_06.out.b 5B
escape_02.out.b 4B
escape_01.out.b 3B
comment_03.out.b 3B
comment_02.out.b 3B
comment_04.out.b 3B
escape_00.out.b 3B
BENCHMARKS 8KB
BENCHMARKS 2KB
rcssmin.c 29KB
rjsmin.c 17KB
jsmin.c 7KB
atrace_process_dump.cc 8KB
共 1713 条
- 1
- 2
- 3
- 4
- 5
- 6
- 18
资源评论
博客园用户1475
- 粉丝: 5
- 资源: 6
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
- yolo目标检测项目实验
- downloadFile-1.hc
- Centos7.9环境下离线安装开源版Nginx(亲测版)
- C++课程设计:基于Qt的航班信息管理系统
- ADS7822UVerilog驱动,前面传的有点问题
- 基于python的高性能爬虫程序,使用了多线程+缓存+xpath实现的,这里以彼-岸图库为例,实现,仅用于学习交流
- 中分辨率成像光谱仪(MODIS)烧毁面积产品信息MODIS-C6-BA-User-Guide-1.2.pdf
- Screenshot_20240427_172613_com.huawei.browser.jpg
- 关于学习Python的相关资源网站链接及相关介绍.docx
- (HAL库)基于STM32F103C8T6的温控PID系统[Dht11、ESP8266、无线透传、L298N……]
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功