window.ShadyCSS

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 发布文章使用：只允许注册用户才可以访问！

---