window.ShadyCSS
Web Components
# install
$ yarn add @webcomponents/shadycss@1.7.1
# OR
$ npm i @webcomponents/shadycss@1.7.1
$ npm i @webcomponents/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).
https://github.com/webcomponents/shadycss
https://www.npmjs.com/package/@webcomponents/shadycss
demo
/* istanbul ignore next */
if (window.ShadyCSS) window.ShadyCSS.prepareTemplate(template, tagName);
::slotted
::slotted
/* Selects any element placed inside a slot */
::slotted(*) {
font-weight: bold;
}
/* Selects any <span> placed inside a slot */
::slotted(span) {
font-weight: bold;
}
https://developer.mozilla.org/en-US/docs/Web/CSS/::slotted
https://developers.google.com/web/fundamentals/web-components/shadowdom
https://javascript.info/shadow-dom-style
https://github.com/w3c/webcomponents/issues/655
https://stackoverflow.com/questions/49678342/css-how-to-target-slotted-siblings-in-shadow-dom-root
https://patternfly.github.io/patternfly-elements/develop/templates/
:host
:host
/* Selects a shadow root host */
:host {
font-weight: bold;
}
https://developer.mozilla.org/en-US/docs/Web/CSS/:host
https://developers.google.com/web/fundamentals/web-components/shadowdom
:root
:root
@charset "UTf-8";
/* c3t.css */
:root {
--color: #000;
--default-color: green;
--new-color: #0f0;
}
html{
/* font-size: 62.5%; */
/* 10px = 1rem */
}
* {
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
margin: 0;
padding: 0;
}
html, body, div, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, object, code, legend, button, input, textarea, th, td, a, img, video {
margin: 0;
padding: 0;
border: 0;
outline: 0;
}
refs
https://github.com/webcomponents/shadycss
https://www.npmjs.com/package/@webcomponents/shadycss/v/1.7.1
https://www.cnblogs.com/xgqfrms/p/13258493.html
©xgqfrms 2012-2020
www.cnblogs.com 发布文章使用：只允许注册用户才可以访问！