# 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
没有合适的资源?快使用搜索试试~ 我知道了~
资源详情
资源评论
资源推荐
收起资源包目录
红米Note8Pro一键TWRP工具miui12.5_R11安卓11专用 (1707个子文件)
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-doublequotes.out.b 1KB
dataurl-nonbase64-noquotes.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_00.out.b 3B
comment_03.out.b 3B
comment_02.out.b 3B
escape_01.out.b 3B
comment_04.out.b 3B
A一键关闭avb并刷入12.5rec.bat 218B
A一键重启到rec.bat 100B
BENCHMARKS 8KB
BENCHMARKS 2KB
misc.bin 8KB
rcssmin.c 29KB
共 1707 条
- 1
- 2
- 3
- 4
- 5
- 6
- 18
xilecn
- 粉丝: 4
- 资源: 21
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功
评论0