<style>
color: red;
</style>
Some html content!
this code does not work. In the Angular framework it can be done by using the :host selector. :global can't help in my case, because I just want to style the component, where these styles are written.
How can I do this in Svelte?
Thank you
PS. I'm pretty new in Svelte :)
<style>
.hello {
color: red;
}
</style>
<div class='hello'>Hello world</style>
This will style all elements with the hello class and only in this component.
Now if we do something like this
App.svelte
<script>
import A from './A.svelte'
import B from './B.svelte'
</script>
<div>
<A/>
<B/>
</div>
A.svelte
Hello
B.svelte
world
then svelte renders that as
<div>Hello world</div>
And there's no way to define a selector to style only "Hello" but not "word". The documentation also mentions that it need something to attach a class to:
CSS inside a block will be scoped to that component.
This works by adding a class to affected elements, which is based on a hash of the component styles (e.g. svelte-123xyz).
Related
I have a Header component that is used on a Layout component, which is used to structure the pages on my Gatsby site. There's a specific page where I need to give my header a different background-color. The problem is that there's no header component on that page, just the layout component. I've ended up making this work by adding a background-color prop to the header and to the layout. And I'm passing down the color down first to the layout which then passes it down to the Header...Is this the best approach? It doesn't feel great.
You could simply use react-helmet to add a class to your body on that specific page only. Let's say "dark-header", something like:
<Helmet>
<body class='dark-header' />
</Helmet>
Then, in your css code you could do something like:
.header { background-color: #FFFFFF; }
body.dark-header {
.header { background-color: #000000; }
}
I am using LitElement and I am trying to load google-font at the element level.
I have tried returning it in an HTML literal in the connectedCallback event, but it does not work.
I could not manage to do it in the get styles() method.
Where should the <link...> statement be placed in the code?
You can import an external style sheet by adding a <link> element to your template, For details, see Import an external stylesheet.
Here's the demonstrate on StackBlitz.
You could import the google font in index.html easily:
<link href="https://fonts.googleapis.com/css?family=Kaushan+Script&display=swap" rel="stylesheet">
or you could create a common style.js file and include it:
const $_documentContainer = document.createElement('template');
$_documentContainer.innerHTML = `<style>
#import url('https://fonts.googleapis.com/css?family=Kaushan+Script');
html,
body {
font-family: 'Roboto', Arial, sans-serif;
height: 100%;
margin: 0;
}
...
</style>`;
document.head.appendChild($_documentContainer.content);
var importDoc = window.document;
var style = importDoc.querySelector('style');
document.head.appendChild(style);
or:
class MyElement extends LitElement {
render() {
return html`
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kaushan+Script">
`;
}
}
demo ( See the red a tag as I imported Kaushan+Script )
I have this code currently, :
doctype html
html
head
title= title
style.
body {
font-family: Verdana;
font-size: 13px;
background: #42f495
}
body
h1 Welcome!
h2 Please Wait
p= sq
I want to align paragraph to center but not getting how to do it using Pug.
First, you need to indent all of the tags to be further in than the body tag to make this all work properly.
To assign a style to a paragraph do this:
p(style="text-align:center;")
Here are two different ways to assign a css class to a paragraph (they will produce the exact same results):
style.
.cssClassExample { text-align:center; }
p.cssClassExample
p(class="cssClassExample")
If you want to assign a class based on a pug variable do this:
- var cssClassVariable = "myClass"
p(class= cssClassVariable)
TLDR:
Is there a way to force-append an attribute to a react tag?
.
The full story:
I'm using reactjs and i've run into a problem with SVG and foreignObjects.
I wanted to center text in an SVG image so i figured the easiest approach would be to use a div in a foreign object.
It works fine on chrome, but in firefox the text isn't displayed.
On closer inspection, it appears that my
requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"
requiredExtensions="http://www.w3.org/1999/xhtml"
xmlns="http://www.w3.org/2000/svg"
Isn't coming through to the browser.
I've read the reactjs docs which suggested putting the prefix
data-
in, but the prefix stays in the browser.
I also tried to set the required features using the style={...}, but then this was inside the style string and not inserted as a tag attribute.
React Code:
import React, {Component,PropTypes} from 'react';
export default class myComponent extends Component {
render() {
return (<svg width = {this.props.width}
height = {this.props.height}>
<foreignObject x = {0} y = {0}
width = {this.props.width}>
<div> <p> {this.props.title} </p> </div > </foreignObject>
</svg>)
}
PARTIAL ANSWER:
I haven't been able to get text in a foreignObject to work with react in firefox, but i did work out how to set 'arbitary' tag attributes.
For each of the react components i assigned refs, i.e.:
<div style={divStyle} ref="d2">
<p style={{wordWrap: 'normal', textAlign: 'left', margin: 'auto', position: 'relative'}} key="p2">
{Math.round(this.props.kW)} W
</p>
</div>
Then in componentdidmount:
componentDidMount() {
this.refs.svg1.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
this.refs.svg1.setAttribute('version', '1.2');
this.refs.fo1.setAttribute('requiredExtensions', 'http://example.com/SVGExtensions/EmbeddedXHTML');
this.refs.d1.setAttribute('xmlns', 'http://www.w3.org/1999/xhtml');
this.refs.fo2.setAttribute('requiredExtensions', 'http://example.com/SVGExtensions/EmbeddedXHTML');
this.refs.d2.setAttribute('xmlns', 'http://www.w3.org/1999/xhtml');
this.refs.fo3.setAttribute('requiredExtensions', 'http://example.com/SVGExtensions/EmbeddedXHTML');
this.refs.d3.setAttribute('xmlns', 'http://www.w3.org/1999/xhtml');
this.refs.fo4.setAttribute('requiredExtensions', 'http://example.com/SVGExtensions/EmbeddedXHTML');
this.refs.d4.setAttribute('xmlns', 'http://www.w3.org/1999/xhtml');
this.refs.fo5.setAttribute('requiredExtensions', 'http://example.com/SVGExtensions/EmbeddedXHTML');
this.refs.d5.setAttribute('xmlns', 'http://www.w3.org/1999/xhtml');
this.refs.fo6.setAttribute('requiredExtensions', 'http://example.com/SVGExtensions/EmbeddedXHTML');
this.refs.d6.setAttribute('xmlns', 'http://www.w3.org/1999/xhtml');
}
This actually broke the foreign object in BOTH chrome and firefox!!
I think the issue is that i'm going by
https://www.w3.org/TR/SVG/extend.html
and they have:
<body xmlns="http://www.w3.org/1999/xhtml">
<p>Here is a paragraph that requires word wrap</p>
</body>
But since you can't use the <body> tag inside a react component, this doesn't get rendered.
I will manually edit the code in firefox and see if the inclusion of <body> in the foreign object fixes this issue.
I think the only option I have is to layer a second SVG component over the top of the first then use setInnerHTMLDangerously to write all of the foreign objects inside. Such a filthy hack!!
Is it just me or did the last release of polymer trim the mustache ? I'd swear this code snippet (http://jsbin.com/eRimiJo/10/edit) worked perfectly last week, and now it's useless as the mustache magic seems to be non functional any more :
<script src="http://www.polymer-project.org/polymer.min.js"></script>
<polymer-element name="test-attr" attributes="width" noscript>
<template>
<style>
#host {
:scope {
display: block;
width: {{width}}px;
height: 100px;
background-color: black;
}
}
</style>
<content></content>
</template>
</polymer-element>
<test-attr width="100">Hello</test-attr>
EDIT : edited to remove obvious typos
There are a couple of things that need changing in your example:
<content> needs to be within the outer </template>
You're binding 100px as the width attribute value. Drop the "px", otherwise the binding output becomes width: 100pxpx; within the <style>.
With the changes: http://jsbin.com/ODEGika/3/edit
That said, this is only working for me in Chrome Canary. It looks like a regression with the polyfills. Filed here: https://github.com/Polymer/polymer/issues/270