I have style sections being added in sub-classes.
Very simplified version:
class MyComponent extends HTMLElement{
constructor(){
super()
this.html = `
<style>
:host {
/* some css in here */
}
</style>
<style>
:host {
/* additional css in here */
}
</style>`
}
//...
}
The second style section seems to be getting ignored.
Should this work OK?
Update: It works if the style section isn't split
class MyComponent extends HTMLElement{
constructor(){
super()
this.html = `
<style>
:host {
/* some css in here */
/* additional css in here */
}
</style>`
}
//...
}
Related
I understand that in order to style elements from the ShadowDOM, the shadowDOM itself has to "know"
the element, thus be declared inside of it.
It works well for regular web components but i haven't found an answer to it weather it's the same for an extended
native element.
For example, I wanted to know if the code I wrote is the best way, i.e. the external p acting as container, or am i creating a redundant p element.
JavaScript:
class P_example extends HTMLParagraphElement {
constructor() {
super();
this.attachShadow({ mode: "open" });
this.shadowRoot.innerHTML = `
<style>
p{
background-color: orangered;
width: max-content;
}
</style>
<p><slot>Some default</slot></p>
`;
this.shadowRoot.append();
}
connectedCallback() {
//add styling class to the p element
}
}
customElements.define("omer-p", P_example, { extends: "p" });
HTML:
<p is="omer-p">Some sample text</p>
I have a component that relies on external stylesheets. I'm bringing the stylesheet into the component like this:
Child component
export default class Child extends Component {
render() {
return (
<div>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" />
...my code here...
</div>
);
}
}
But what's happening is this is forcing those styles onto the parent component as well.
Parent Component
export default class Parent extends Component {
render() {
return (
<div>
...code here...
<Child />
... more code here...
</div>
);
}
}
Is anyone aware of a way that I can keep that stylesheet link localized to just that child component so the styles aren't applied to the parent component as well?
Edit 2
Currently trying the shadow dom route, trying to pass down some children. Getting an error after the initial render saying Cannot read properties of undefined (reading 'children'). It does render the this.props.children initially...
import React, { Component } from 'react';
class MyComponent extends HTMLElement {
constructor() {
super();
const shadow = this.attachShadow({ mode: 'open' });
shadow.innerHTML = `
${this.props.children}
`;
}
};
export default class Child extends Component {
render() {
return (
<div>
<script>
{!customElements.get("my-component") && customElements.define('my-component', MyComponent)}
</script>
<my-component>
<h1>Hello from shadow</h1>
</my-component>
<h1>Hello</h1>
</div>
);
}
}
You can try CSS Modules. Add :local(.className) to the class you want to use in your code which is in the font-awesome-min.css file. Then import the styles to your component. For example import styles from './font-awesome-min.css' then use the module in your code. The styles will only apply to specific element and won't affect other elements in the document. So let's say you have a class called .usericon in your css you do this in the css file.
CSS
:local(.usericon){
fill: red;
}
React Code
import styles from './font-awesome-min.css'
export default function Profile(){
return (
<i className={styles.usericon}>User Icon</i>
)
}
One way to truly isolate your CSS is with Web Components. Web Components are a browser API that allows defining custom elements with their own "shadow DOM". If a style is defined inside the shadow DOM, it is truly sandboxed with no styles going in or out. You can use whatever selectors you like:
class FancyBox extends HTMLElement {
constructor() {
super();
const shadow = this.attachShadow({ mode: 'open' });
shadow.innerHTML = `
<style>
.fancy-box {
border: solid 3px darkblue;
background: dodgerblue;
padding: 10px;
color: white;
font: 16px sans-serif;
}
</style>
<div class="fancy-box">
<slot></slot>
</div>
`;
}
}
customElements.define('fancy-box', FancyBox);
.fancy-box {
border: dashed 3px darkred !important;
background: crimson !important;
padding: 10px !important;
color: white !important;
font: 16px sans-serif;
}
<fancy-box>Safe in my shadow DOM</fancy-box>
<div class="fancy-box">I am affected by outside stylesheets</div>
Note the use of <slot></slot>. This is a placeholder for child elements of the component.
If I wanted to use this custom element from React, it needs to be defined separately so it only runs once.
class FancyBox extends HTMLElement { /*...*/ };
customElements.define('fancy-box', FancyBox);
class ReactFancyBox extends React.Component {
constructor() {
super();
this.state = { value: 'hello world!' }
}
handleChange(e) {
this.setState({ value: e.currentTarget.value });
}
render() {
return (
<div>
<fancy-box>
<strong>{this.state.value}</strong>
</fancy-box>
<input value={this.state.value} onChange={e => this.handleChange(e)} />
</div>
);
}
};
So setting styles dynamically is easy enough, the question I have is based on dynamic styles within a Media Query, so between max-width: 1000px I want the styling to be something based on a property or some calculated JS like the total width of a carousel by the amount of components.
Anyway here is a code snippet of something that doesn't work but shows how my thinking about how I HOPED the properties could be applied :-P
<link rel="import" href="../../bower_components/polymer/polymer-element.html">
<dom-module id="hello-eggs">
<template>
<style>
:host {
display: block;
background: [[prop2]];
}
#media screen and (max-width: 1000px) {
background: [[prop2]]
}
</style>
<span>[[prop1]] are here</span>
</template>
<script>
/**
* #customElement
* #polymer
*/
class HelloEggs extends Polymer.Element {
static get is() { return 'hello-eggs'; }
static get properties() {
return {
prop1: {
type: String,
value: 'Hello Eggs'
},
prop2: {
type: String,
value: '#fc0'
}
};
}
}
window.customElements.define(HelloEggs.is, HelloEggs);
</script>
</dom-module>
Thank you in advance
It's okay I figured out a way that makes me happy and hopefully helps other people like myself :-D
Basically I get the stylesheet and insert a rule for a new Media Query which lets me set what I want. I also changed the width to 500px
<link rel="import" href="../../bower_components/polymer/polymer-element.html">
<dom-module id="hello-eggs">
<template>
<style>
:host {
display: block;
background: #eee;
margin-bottom: 10px;
}
</style>
<span>[[prop1]] are here</span>
</template>
<script>
/**
* #customElement
* #polymer
*/
class HelloEggs extends Polymer.Element {
static get is() { return 'hello-eggs'; }
static get properties() {
return {
prop1: {
type: String,
value: 'Hello Eggs'
},
prop2: {
type: String,
value: '#fc0'
}
};
}
connectedCallback() {
super.connectedCallback();
let sheet = this.shadowRoot.styleSheets[0];
sheet.insertRule(`#media screen and (max-width: 500px) { span { background: ${this.prop2}; } }`, 1);
}
}
window.customElements.define(HelloEggs.is, HelloEggs);
</script>
</dom-module>
I still think it would be great to be able to put properties in styles area for extreme cases, but this still gives me this if I have all the styles applied with insertRule which is great for widths and heights etc.
I have a Native V1 component that is not using shadowDOM so I place my CSS in the <head>. But when someone else uses my component my CSS no longer works.
This only happens if their component does use shadowDOM.
Example Code for my component:
class MyEl extends HTMLElement {
constructor() {
super();
}
connectedCallback() {
this.innerHTML = `<div class="spaced"><button class="happy-btn">I'm Happy</button></div>
<div class="spaced"><button class="sad-btn">I'm Sad</button></div>`;
}
}
// Define our web component
customElements.define('my-el', MyEl);
button {
padding: 8px 20px;
}
.happy-btn {
background-color: pink;
}
.sad-btn {
background-color: #007;
color: white;
}
<my-el></my-el>
My CSS is loaded into the <head> tag since I am not using shadowDOM. But once the outer element includes me in their shadowDOM then things fall apart.
If you are creating a component that does NOT use ShadowDOM that you may still need to add your CSS into a shadowRoot. If someone else places your component into their shadowDOM, then you must add your CSS to their shadowRoot. You can do this with the following code:
const myStyle = document.createElement('style');
myStyle.setAttribute('component', 'my-el');
myStyle.textContent = ` button {
padding: 8px 20px;
}
.happy-btn {
background-color: pink;
}
.sad-btn {
background-color: #007;
color: white;
}`;
function addCss(el, selector, styleEl) {
// Check to see if we have been placed into a shadow root.
// If we have then add our CSS into that shadow root.
let doc;
try {
doc = el.getRootNode();
if (doc === document) {
doc = document.head;
}
}
catch(_ex) { doc = document.head; } // Shadow DOM isn't supported.
if (!doc.querySelector(selector)) {
doc.appendChild(styleEl.cloneNode(true));
}
}
class MyEl extends HTMLElement {
constructor() {
super();
addCss(this, 'style[component="my-el"]', myStyle);
}
connectedCallback() {
this.innerHTML = `<div class="spaced"><button class="happy-btn">I'm Happy</button></div>
<div class="spaced"><button class="sad-btn">I'm Sad</button></div>`;
}
}
customElements.define('my-el', MyEl);
class TheirEl extends HTMLElement {
constructor() {
super();
this.attachShadow({mode:'open'});
this.shadowRoot.innerHTML = `<hr/><my-el></my-el><hr/><my-el></my-el><hr/>`;
}
}
customElements.define('their-el', TheirEl);
<their-el></their-el>
The function addCss will place your CSS into the correct shadowRoot, or into document.head if there is no shadowRoot.
You must call addCss within your constructor to place the CSS in the correct location. This routine will also make sure you don't add it twice as long as you have a unique selector to identify your <style> tag.
In mine you see the <style> tag adds an attribute called component with a value of the component name. In my case component="my-el".
Then I use the selector 'style[component="my-el"]' to see if that tag is already in the shadowRoot, or document.head if there is no shadowRoot, and only add the styles if it does not already exist.
You can not assume that your component will not be in shadow DOM just because you are not using it. Use the example above to protect yourself.
Side Note
If you are using shadow DOM then this problem goes away since your have to place your CSS into your own shadowRoot.
How can I pass data from angular tag to the styles in the #Component?
Here is my component:
import { Component, Input } from '#angular/core';
#Component({
selector: 'icon',
template: `<svg class="icon"><use attr.xlink:href="#{{name}}"></use></svg>`,
styles: ['.icon{width:{{size}}px;}']
})
export class IconComponent {
#Input() name: string;
#Input() size: any;
constructor() { }
}
I wanna set size property from component.
used in html file:
<icon name="logo" size="37"></icon>
Binding in styles is not supported. You can use style binding like
template: `<svg class="icon" [style.width.px]="size"><use attr.xlink:href="#{{name}}"></use></svg>`,
I'm actually surprised that I finally found a somewhat solid solution to this using a ngx-css-variables.
My use case is that I have a 3rd-party library, which creates many child components within itself, as it draws charts.
I needed to set the linear gradient with a url(#<uuid>).
CSS Template
/deep/ngx-charts-line-chart {
display: flex;
/deep/ngx-charts-chart {
display: flex;
div.ngx-charts-outer {
display: flex;
svg {
.line {
stroke: var(--gradient);
stroke-width: 4px;
}
}
}
}
}
Component
import * as uuid from 'uuid/v4';
...
private _linearGradientId = uuid();
get uuid() {
return this._linearGradientId;
}
get gradientCss() {
return {
'--gradient': `url(#${this.uuid})`
}
}
...
HTML Template
...
<ngx-charts-line-chart
[css-vars]="gradientCss"
...
<ngx-charts-line-chart>
You still have to deep style the component since it's components are not in your template, but ngx-css-variables will inject a function into the style property, which seems hacky, but it works!
So now the stroke comes from that dynamic function at runtime. Super cool. I wish angular supported this natively.