im trying to create a new lit element component extending from other component
but render method don´t works.
the component is empty..
export default class ChildComponent extends FatherComponent {
static get styles() {
return css`
:host {
display: block;
}`;
}
render() {
return html`<h1>Hi</h1>`;
}
}
window.customElements.define('child-component', ChildComponent);
I had the same kind of issue today. It seems that render() was not triggered.
To solve my issue I had to call super.connectedCallback() in the connectedCallback() methods for both child and parent.
I also call super() in the constructor.
Hope that helps.
Related
I have a trivial LitElement class that I want to style with some internal CSS:
import {LitElement, html, css, customElement, property} from 'lit-element';
#customElement('address-card')
export class AddressCard extends LitElement {
#property()
streetAddress?: string;
#property()
postalCode?: string;
#property()
city?: string;
static get styles() {
return css`
.address { border: 1px dashed gray; }
`;
}
render() {
return html`
<div class="address">
<div>${this.streetAddress}</div>
<div>${this.postalCode} ${this.city}</div>
</div>
`;
// Remove this method to render the contents of this view inside Shadow DOM
createRenderRoot() {
return this;
}
}
The static get styles() method should allow me to add styles to the component, but nothing I add there seems to get applied. Not even a * { ... } selector, which should affect all elements, seems to do anything.
The problem is the createRenderRoot() method. If you disable shadow root, there's no need to encapsulate styles inside the component implementation - you can use global CSS. If you want to encapsulate styles, remove the createRenderRoot override and the static get styles() rules will get applied.
Problem:
I have built an angular application. There I want to add a CSS class to the body whenever It navigates to that components and remove it whenever the user leaves out of that component.
This is what I have done. In the global CSS file, I have defined a style like this.
.background-color {
background-image: linear-gradient(to right,#3f51b5, #00bcd4) !important;
}
And In the login component, I have done something like this.
import { Component, OnInit } from "#angular/core";
#Component({
selector: "app-login",
templateUrl: "./login.component.html",
styleUrls: ["./login.component.css"]
})
export class LoginComponent implements OnInit {
constructor() {
}
ngOnInit() {
window.onload = function() {
document.body.classList.add("background-color");
};
}
}
But this is not working correctly. When I navigate to this component the styles not added but when I refresh the pages it adds the styling to the body. I tried a lot to find a solution to this problem but I was unable to do so. Can someone help me to solve this issue? Thank you!
No need to write onLoad function inside the ngOnInit() method. I suggest you read the angular official ngOnit().
rewrite your ngOnInit() like below
ngOnInit() {
let element = document.getElementById("bg-color");
element.classList.add("background-color");
}
and your component.html file
<p id="bg-color">
Start editing to see some magic happen :)
</p>
Live Demo
Since you are using angular routing, this will not work unless you navigate to that component manually, because when you navigate to a router link, it does not reload the application, it justs removes the other components and add the new component. It does not trigger the onLoad event. But when you reload manually, it will work.
try the following
export class LoginComponent implements OnInit {
loaded: boolean = false;
constructor() {
}
ngOnInit() {
this.loaded = true;
}
and on the component html
<body [class.background-color]="loaded"></body>
or something on the similar lines.
I have React parent component A which has its own scss file a-style.scss. Component B is child of A. A is passing styleInfo object as props which is applied on B.
My question is - is there any way we can define styleObj in a-style.scss instead of defining it inline. I want all styling related info should be in external scss file.
Component A
import "./a-style.scss";
import B from "./B.js";
class A extends Component {
constructor(props) {
super(props);
}
const styleObj = {
backgroundColor: "#F9F9F9",
borderRadius: '2px',
color: "#686868",
};
render() {
return (<B styleInfo={this.styleObj}></B>);
}
}
Component B
class B extends Component {
constructor(props) {
super(props);
}
render() {
return (<div style={this.props.styleInfo}></div>);
}
}
The standard way is to define CSS properties based on class in your scss/css. And then pass className from props in your React component:
class A extends Component {
theme = "themeA";
render() {
return (<B styleInfo={this.theme} />);
}
}
class B extends Component {
styleClass = ["B"];
render() {
const className = styleClass.push(this.props.styleInfo).join(' ');
return (<div className={className} />);
}
}
.themeA {
background-color: #F9F9F9;
border-radius: 2px;
color: #686868;
}
.B {
/* Some style for B component */
}
Why not just import that one file directly into B.js?
Is there any benefit of having it go through a parent, seems like necessary routing to me!
If you do need this, then I would just keep it in JS, as this is what JS is good at, or at least, have JS just do the className switching and, again, just have one css file that is a main style lookup hash!
Best of luck!
What is the proper way to use the styles option/property of the ComponentDecorator? Using the styles property with the default my-name component from the repository stencil-component-starter doesn't seem to affect the styles of the respective component nor generate something like a <style> tag in the <head>. How is styles intended to work? Or has it not been implemented yet? If the goal is to avoid having a separate CSS asset that needs to be loaded, but provide styles for the component, would styles be the right choice or is there another property such as host would need to be used?
Below is a sample component generated from the stencil-component-starter]1 with stylesUrl #Component property replaced with a styles property and setting font-size property. No errors are generated during dev or build tasks.
import { Component, Prop } from '#stencil/core';
#Component({
tag: 'my-name',
styles: `my-name { font-size: 24px; }`
})
export class MyName {
#Prop() first: string;
render() {
return (
<div>
Hello, my name is {this.first}
</div>
);
}
}
ComponentDecorator is defined as:
export interface ComponentOptions {
tag: string;
styleUrl?: string;
styleUrls?: string[] | ModeStyles;
styles?: string;
shadow?: boolean;
host?: HostMeta;
assetsDir?: string;
assetsDirs?: string[];
}
Thank you for any help you can provide!
I just tried with latest version 0.0.6-22, and it seems to work completely now.
While compiling, it will tell you if your styles contents is valid or not (mainly looking for valid selectors).
Here is a working example (with a simple string):
import { Component, Prop } from "#stencil/core";
#Component({
tag: "inline-css-example",
styles: 'inline-css-example { font-size: 24px; }'
})
export class InlineCSSExampleComponent {
#Prop() first: string;
render() {
return <div>Hello, my name is {this.first}</div>;
}
}
This one works too, with ES6 Template Strings (just showing multiline):
import { Component, Prop } from "#stencil/core";
#Component({
tag: "inline-templatestring-css-example",
styles: `
inline-templatestring-css-example {
font-size: 24px;
}
`
})
export class InlineCSSExampleComponent {
#Prop() first: string;
render() {
return <div>Hello, my name is {this.first}</div>;
}
}
(EDITed to show evolution since 0.0.6-13)
I'm a noob and I'm trying to compile a JSX following this tutorial :
http://xabikos.com/2015/03/18/Using-Reactjs-net-in-Web-Forms/
using reactjs.net
I'm trying to define a class like this...
class First extends React.createClass {
render(){
}
constructor(props) {
}
componentDidMount() {
}
}
Render method seems to work fine, but componentDidMount is not called,
and the constructor is also never called, any idea why is this happening?
You Are mixing The concept of function based components and class-based components, You can not use createClass while using class-based Components, That's why you are not getting what you desire.
The right way to make a component using class is this:-
import React from 'react';
class First extends React.Component{
constructor(props) {
super(props);
}
componentDidMount() {
}
render(){
}
}
And When You have to make components Using plain functions You have to use this:-
var First = React.createClass({
render:function(){
//Your view
}
})
I Hope it will solve your problem