GitPlanet

Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting

Created with love in Canada, visit hostnodejs.com today

Feel like to post an Ad? Learn Details
All Projects β†’ adamlacombe β†’ Shadow-DOM-inject-styles

adamlacombe / Shadow-DOM-inject-styles

Licence: MIT license
πŸŽ‰ A helper function to easily modify Shadow DOM CSS.

Programming Languages

javascript
184084 projects - #8 most used programming language
typescript
32286 projects

Labels

cssweb-componentsshadow-domstenciljsionic4

Projects that are alternatives of or similar to Shadow-DOM-inject-styles

ionic-custom-components
🌈 Ionic Tutorial: Mastering Web Components in Ionic Framework. This repo is an Ionic project showcasing Angular custom components and Stencil custom web components.
Stars: ✭ 30 (-36.17%)
Mutual labels:  web-components, shadow-dom, stenciljs
Atomico
Atomico a micro-library for creating webcomponents using only functions, hooks and virtual-dom.
Stars: ✭ 481 (+923.4%)
Mutual labels:  web-components, shadow-dom
anywhere-webcomponents
A UI work in progress based on custom elements (web components) for use in anywhere.
Stars: ✭ 17 (-63.83%)
Mutual labels:  web-components, stenciljs
lwc-test
LWC plugins and utilities for testing
Stars: ✭ 39 (-17.02%)
Mutual labels:  web-components, shadow-dom
corejam
A scaffolding for building progressive GraphQL powered jamstack applications.
Stars: ✭ 24 (-48.94%)
Mutual labels:  web-components, stenciljs
svelte-webcomponents
A ready-to-use project template to build custom elements (web components) with Svelte 3 with support and examples for web components, jest, sass, nested components with props, eslinting, stylelinting, Github actions, propagating custom events from shadow-DOM to real-DOM etc.
Stars: ✭ 22 (-53.19%)
Mutual labels:  web-components, shadow-dom
Xy Ui
πŸŽ¨ι’ε‘ζœͺζ₯ηš„εŽŸη”Ÿ web components UIη»„δ»ΆεΊ“
Stars: ✭ 603 (+1182.98%)
Mutual labels:  web-components, shadow-dom
focus-trap
A lightweight web component that traps focus within a DOM node
Stars: ✭ 44 (-6.38%)
Mutual labels:  web-components, shadow-dom
Nutmeg
Build, test, and publish vanilla Web Components with a little spice
Stars: ✭ 111 (+136.17%)
Mutual labels:  web-components, shadow-dom
Vime
Customizable, extensible, accessible and framework agnostic media player. Modern alternative to Video.js and Plyr. Supports HTML5, HLS, Dash, YouTube, Vimeo, Dailymotion...
Stars: ✭ 1,928 (+4002.13%)
Mutual labels:  web-components, stenciljs
Omi
Front End Cross-Frameworks Framework - ε‰η«―θ·¨ζ‘†ζžΆθ·¨εΉ³ε°ζ‘†ζžΆ
Stars: ✭ 12,153 (+25757.45%)
Mutual labels:  web-components, shadow-dom
web-components-tutorial
HTML Web Component using Vanilla JavaScript
Stars: ✭ 38 (-19.15%)
Mutual labels:  web-components, shadow-dom
placeholders
SVG-based placeholders in web components
Stars: ✭ 28 (-40.43%)
Mutual labels:  web-components, stenciljs
design-system
The Baloise Design System consists of reusable components and a clearly defined visual style, that can be assembled together to build any number of applications.
Stars: ✭ 40 (-14.89%)
Mutual labels:  web-components, stenciljs
helium-animated-pages
A light spiritual succesor to neon-animated-pages using only css animations
Stars: ✭ 17 (-63.83%)
Mutual labels:  web-components, shadow-dom
Remount
Mount React components to the DOM using custom elements
Stars: ✭ 522 (+1010.64%)
Mutual labels:  web-components, shadow-dom
element
Fast and simple custom elements.
Stars: ✭ 65 (+38.3%)
Mutual labels:  web-components, shadow-dom
frosted-glass
❄️ Add a live frosted glass blur effect over any type of web content, including text.
Stars: ✭ 62 (+31.91%)
Mutual labels:  web-components, stenciljs
Custom Elements Ts
Create native custom elements using Typescript
Stars: ✭ 52 (+10.64%)
Mutual labels:  web-components, shadow-dom
Shadow Dom In Depth
Everything you need to know about Shadow DOM
Stars: ✭ 191 (+306.38%)
Mutual labels:  web-components, shadow-dom
View All Similar Projects βž”

Shadow-DOM-inject-styles

A helper function to easily modify Shadow DOM CSS.

Install

npm install shadow-dom-inject-styles --save

Vanilla JS Example / Demo

jsfiddle

<script type="module">
  import {injectStyles} from 'https://unpkg.com/shadow-dom-inject-styles@latest/dist/index.js';

  setTimeout(() => {

    const toolbar = document.querySelector('ion-app > ion-header > ion-toolbar');

    // language=CSS
    const styles = `
        .toolbar-background {
            background: red !important;
        }
        .toolbar-container {
            color: #fff !important;
        }
    `;

    injectStyles(toolbar, '.toolbar-background', styles);

  }, 200);
</script>

Typescript Example

import {injectStyles} from 'shadow-dom-inject-styles';

const toolbar = (this.el.querySelector('ion-header > ion-toolbar') as HTMLElement);

// language=CSS
const styles = `
  .toolbar-background {
    background: red !important;;
  }
`;

injectStyles(toolbar, '.toolbar-background', styles);
Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].