I develop component, but I need, what would can change the tag name of a component container.
Like this:
<my-component tagName="section"></my-component>
render to
<section>... my inner component tags ...</section>
How to make it?
I read about render() and functional components, but create component template with
render(createEl, ctx){
return createEl(ctx.props.tagName, [createEl('div', [...])])
}
... looks horrible and uncomfortable.
edit:
Something like this:
http://jsbin.com/qozawiwumi/edit?html,output
I decided this question, using is="" and this.$vnode.data.tag for render custom component wrapper.
https://jsbin.com/gifesom/edit?html,output
Related
I am currently writing a component in svelte and in order to work on only this component I am also using storybook.
The problem is that because of the css library I am using the component will be incorrectly rendered unless it is properly wrapped by a parent element. In short, this component is list element and without the list wrapper the css will be funky.
So the question is, can I somehow tell storybook to wrap my component in a div?
i.e. something like this
storiesOf("Kanban card", module)
.add(
"small",
() => ({
Component: Card,
template: "<div class='wrapper'><Card /></div>",
props: {
...
}
})
);
Your best bet would be to create a separate Svelte component, specifically for that story. This approach also gives you a way to use slots properly, something that's not clearly available through Storybook.
Something like kanban-card.story.svelte containing:
<script>
import Card from '../wherever/kanban-card.svelte';
// export the props that the component needs
// pass up all events you want to handle
</script>
<Card on:eventYouWant />
We have application that is built using Angular and now for all customer-specific requirements we want to build web components using stencil js.
Idea is to keep core application clean and not to mixin code for specific client requirements.
So we came up to web components and we stick to Stencil JS.
First problem that we are facing is that our web component will need to use jquery, bootstrap js and some third party js as well.
We want to build our components to be encapsulated from outside that means they will be in shadow dom.
Now I have two questions
1) Is it good practice that every component include JS libraries like jQuery, bootstrap js etc because it doesn't sound to me as a good idea
2) How we can include jQuery for example into web component.
I tried many ways and the last one was to include tag in the constructor of a stencil web component, but it doesn't work.
export class TestComponent {
#Prop() token: string;
#State() test: string;
#Element() private element: HTMLElement;
constructor() {
this.element.innerHTML = `
<script src="../../assets/js/jquery.min.js"></script>
`;
So the question is how to use JS third party libraries in web component built in stencil that is in shadow dom ( shadow option is set to true )
Any opinions about this in general are welcome and will be appreciated :)
For me it sounds like you are bending the purpose of Stencil and Web-components a bit. I never had this pain doing this but to answer your question: It depends of what you wanna achieve. For example you can use Jquery natively inside the shadow-dom when you import Jquery in the Light-dom.
Index.html
<script src="/jquery.min.js"></script>
</head>
<body>
<my-component></my-component>
<div id="test2"></div>
</body>
my-component.tsx
testfunc(){
console.log($().jquery);
console.log($("#test"));
console.log($("#test2"));
}
render() {
return <div id="test">
<button onclick={this.testfunc.bind(this)}>asd</button>
</div>;
}
The result of testfunc are here:
So as you can see - you already can use Jquery just by putting it into your main application. But there are some limitations as you can see you have access to all the DOM elements from light-dom but none from shadow-dom. Thats why #test wasn't found and #test2 was.
But interesting to mention here is that I was also able to load a file inside this #test2 div container which is in the index.html. Just by using the jquery .load function from inside the web-component.
$( "#test2" ).load( "/index.html" );
Things get a bit more complicated when you want to use the $ selector to get elements inside the web-component (shadow-dom) but there is absolutely no reason to do so:
Stencil has it's own this.el.shadowRoot.querySelector() that you can use inside the component or you can directly stick a variable to a DOM element like so:
render() {
return <div ref={el => this.element = el}>
<button onclick={this.testfunc.bind(this)}>Press Button</button>
</div>;
}
Than you can use this.element inside the web-component to access the div.
But in general you can also try to use the scoped flag in the component decorator. Than you usually can use everything from the light dom because there is not such a hard isolation:
#Component({
tag: 'my-component',
styleUrl: 'my-component.css',
shadow: true ---> instead of this
scoped: true ---> try this
})
To summarize a bit: I think there is never a good reason to use these libraries inside a web-component in general. But if you really have to - it always depends on your needs and what you want / need to achieve. Stencil has some really helpful and good built in functions.
For most web components I would not use jQuery, as with any modern framework dom manipulation is not needed, mostly you just focus on render function.
I did a test and this seems to work ok after adding jquery dependency with npm i jquery:
import { Component, h } from '#stencil/core';
import $ from "jquery";
#Component({
tag: 'app-test'
})
export class AppTest {
render() {
const version = $().jquery;
return [
<div>
jQuery Version: {version}
</div>
];
}
}
I would consider using Stencil exactly the opposite way. Create your generic stuff in Stencil and than the customer specific inside Angular. For example you start with a simple "button" as a web-component in stencil.
export class CoolestButton {
render() {
return <button class="coolest-button"></button>
}
}
Than you create another web-component "dropdown" which uses the "button" as foundation.
export class CoolestDropdown {
...
someDropdownFunctions(){}
...
render() {
...
return [<coolest-button></coolest-button>, ...dropdownSpecific]
}
}
Than you create a Header component which exists of dropdowns.
export class CoolestHeader {
render() {
return [
<coolest-dropdown data="NavPoint1,NavPoint2,NavPoint3">Home</coolest-dropdown>,
<coolest-dropdown data="About-us,Impress">Home</coolest-dropdown>
];
}
The amazing thing of Stencil is that you can use 10000x times the coolest-button but it will only will load it once. Thats why nesting the web-components like this is absolutely coding sugar. Than you have a really strong library that you can use in all your customer projects. And when you write your tests - every customer application is tested too since they have all the same base.
jQuery can be used inside a Shadow DOM with out any issues using stenciljs.
If the jQuery has already been added to the light DOM or not has to be checked inside the web component.
In some cases when we load the jQuery again it resets the events in the light DOM creating issues in Light DOM.
You can use a console.log($) and try and catch to check if its loaded other wise load.
$ will also work if you install 'types' for jQuery.
So basically it only matters if the external libraries tries to access the DOM using
document.getElementById
inside the library files.
Inside shadow DOM
this.el.shadowroot
has to be used. The associated css should be added inside the webcomponent as well.
I have a very niche use-case. I have to add a modal animation like this:
regular css animation
But I need to have a component (our own filter component for a datatable) inside said modal.
So I need to use the ModalService. But this service is only attaching my custom config like this:
toggleFilter = () => {
const modalOptions: ModalOptions = {
initialState: {
labels: this.datatableLabels, // needed for filter to have labels
filterGroups: this.filterGroups // needed to add filterGroups
},
class: 'filter-modal' // this sould be my custom class
};
this.bsModalRef = this.modalService.show(FilterComponent, modalOptions);
}
to modal-content and the above mentioned animation and styling uses divs above that. Not only it's working when encapsulation set toViewEncapsulation.None then it screws our other modals as well, since I cannot apply correct classes to the one I need to mess with.
How can I overcome this issue I'm having?
Instead of using the ModalService and open desired embedded component within the modal. You can basically inject the desired component into the body of the modal while using directive instead -> Here you are declaring the whole modal layout -> you can modify all the related classes so it's easier to modify a modal and have your ViewEncapsulation untuched so other modals are unaffected.
I'd like to ask for a little nudge to get my brain out of the box I got it into.
Context
Angular 4 using Angular CLI and AoT.
All methods mentioned in https://angular.io/docs/ts/latest/guide/component-styles.html describe ways to set complex CSS of a component while it is being written by a developer.
After a component is created, Angular allows to adjust individual styles and even assign various CSS class names to tags in the component as you please, all that using [ngClass], <div [class.something]="condition">, various #HostBinding decorators and some other methods.
However, none of the above can change the CSS declaration the component is using. The methods above can either (a) use what is already available in the stylesheet defined by the developer or (b) set individual CSS properties to individual HTML tags in the component's template.
Question
How would I update the CSS for the whole component on runtime so that all elements in that component respond to the new CSS?
Say I introduce a new style for a div.someClass and I want all matching elements div.someClass to reflect the new style.
Plunker
A showcase of my attempts is here: https://plnkr.co/edit/N2C40cSb7hd1AyOxWWdT
The button should be red, based on the value of MyChildComponent.styles
I think I understand why it doesn't work the way I would expect: shortly said, styles are built in the component during compilation, not runtime, including those found inside <style /> tags in the template.
But knowing why it doesn't work doesn't help me to make it work.
Any help highly appreciated.
Solution 1
Inserting a new css class is not possible ( as far as i know ) but you can insert css properties to your component dynamically.
I modified your dynamicStyles() to this
get dynamicStyles(): any{
return {'background': 'red' };
}
that returns an object instead of string because you will pass this object to ngStyle of your button.
In your template, I change the button like this
<button type="button"
[ngStyle]="styles">
Button
</button>
Here's a plunkr
Solution 2
This is something that I would not recommend but in your case it might be useful. You can add this
encapsulation: ViewEncapsulation.None
and the import
import {ViewEncapsulation} from '#angular/core'
to your #Component.You can leak your component's css so that you can use it on your child component. Then in your child component, add a [ngClass] in your button so that you can just pass a variable via #Input() if it should be red.
<button type="button"
[ngClass]="{'redButton': isButtonRed}"
>Button</button>
And in your style.css
.redButton{
background:red;
}
And in your main component.
<div>
<h2>Hello name</h2>
<my-child [isButtonRed]="true"></my-child>
</div>
Here's another plunkr
Hope this helps.
I created a simple React app using https://github.com/facebookincubator/create-react-app.
I am trying to specify a configurable URL to a component's CSS like this:
.Cell {
background-image: url({process.env.REACT_APP_STATIC_URL}./someImage.png);
}
And here's the component:
import React from 'react';
import './Cell.css'
class Cell extends React.Component {
render() {
return (
<div className="Cell">
{this.props.name}
</div>
);
}
}
But it doesn't look like the process variable trickles down to the imported CSS. How would I go about doing this?
If you want to use js variables in CSS, try React inline-style instead of plain css file.
https://facebook.github.io/react/tips/inline-styles.html
If you want to separate CSS and JS, you might need a CSS preprocessor to manage your global variables.
I came across one such scenario, The method I used is instead of adding it as background in CSS, make an img element and assign the path as src in component itself. I don't think there is any other way of doing that.
Commenting on this as I've recently had a similar issue. This should work to send an image file as a CSS variable in a build.
use the style prop to invoke a CSS style
Use template literal around the url() value
use the Javascript require() to refer to the file in the final build pack. Using a relative url requires that you call the image relative to where the the page will be called instead of being relative to the component JS file.
In the React component, use the inline style prop to set the CSS variable:
<div
style={{"--img":`url( ${require("../../images/coding.jpg")})`}}>
</div>
in the CSS file:
background-image: var(--img);