Polymer has support for <style is="custom-style"> which allows you to define styles that only apply to elements, e.g. the shadow DOM.
Polymer also has support for <dom-module id="shared-styles"> which allows you to package a set of style declarations that can be imported into an element definition.
Thus the point of both of them seems to be to allow you to style a polymer element. Why would you use one over the other? The use cases overlap substantially, it seems.
Additional confusion: shared-styles can be imported into custom-style. Why would you do this? Why not?
A <dom-module id="my-shared-styles"> declares a reusable style module hat you can import into elements or <style is="custom-style"> tags.
Use in a custom element
<dom-module id="my-element>
<template>
<style include="my-shared-styles"></style>
...
</template>
</dom-module>
or in the <style> tag outside a custom element (for example in <head>)
<head>
<style is="custom-style" include="my-shared-styles"></style>
</head>
<style is="custom-style"> is only required when you want to use Polymer CSS features (CSS variables and mixins) in a style element that is not inside a <dom-module>. Inside <dom-module> just <style> is enough.
Related
For CSS in my nextjs project I am using styled-jsx (https://github.com/vercel/styled-jsx).
All styled JSX tags (<style jsx>) will be appended at the end of the HTML <head> element.
However I have another native (non styled-jsx) HTML <style> tag that contains several CSS overrides. If I place my <style> tag in the nextjs <Head> component it will be placed in the HTML <head> element but above the other styled-jsx style tags. This will cause that the other styled-jsx <style jsx> tags will override my styles defined in my normal <style> tag. I want to achieve the other way around.
import Head from 'next/head';
<Head>
<style dangerouslySetInnerHTML={{ __html: props.css }} />
</Head>
I already tried to put my style tag outside of the <head> element but this is no option for me right now.
How can I put my native HTML <style> tag at the end of the HTML <head> element so other styles will be overridden?
If you are still looking for an answer:
My styles were overriden by styles like Bootstrap so I was also facing your problem.
In the end I decided to override the order in next/head by overriding next.js-Sourcecode.
This is the file you might need to override:
https://github.com/vercel/next.js/blob/canary/packages/next/pages/_document.tsx
You have to move {head} down.
After some research I decided to use a npm-module named patch-package. https://www.npmjs.com/package/patch-package
It's straight forward and allows you to create a patch for the nextjs-Sourcecode.
Is it possible to apply an external CSS to a component in AngularJS1?
And if so - how?
I could find only examples which apply inline css...
AngularJS component's template is nothing different then a regular HTML template. So including the CSS in one of the standard ways should work.
Inside of the HTML of your template use:
<link rel="stylesheet" type="text/css" href="theme.css">
Where theme.css will be replaced with the absolute path to your external CSS.
Back with another Polymer question, I have a Polymer/Electron app that I'm trying to style.
I want to create a theme.css that contains a :host block with my entire theme in it that I can then import into my modules stylesheet but I've tried a few different things and tried finding anything in the documentation to no avail.
So far, I have tried in, and outside of the <template> definition:
<link rel="stylesheet" href="./account-list.css"> with an #import
<style>#import 'my-theme.css';</style> just above my <link>
:root instead of :host in my theme.css
But neither seem to work, the theme.css is definitely being requested but has no affect on the module's style.
Is there anyway to have a theme like this for Polymer, I really don't want to have a build step.
There's a new concept called style module (actually a dom-module element behind the scene) introduced in Polymer 1.1 (read it here) and the old way of including external stylesheets has been deprecated (read it here).
Basically, you need to create an html file like how you normally create an element to store your styles. The id defines the name of this file that will be referenced later on.
<!-- shared-styles.html -->
<dom-module id="shared-styles">
<template>
<style>
.red { color: red; }
</style>
</template>
</dom-module>
Then obviously you need to import this file in your page.
<link rel="import" href="shared-styles.html">
Now, there are two scenarios.
If you are using custom-style at the document level, you need to
include the style module you previously defined like this -
<style is="custom-style" include="shared-styles"></style>
If you simply want to include the style module inside one of your
elements, do this -
<dom-module id="my-element">
<style include="shared-styles"></style>
Have a look at this plunker that demonstrates both scenarios.
Keep in mind that in your particular example, since you are using :host, I assume you will go with scenario 2. So this plunker should be a bit more clearer.
Using dom-module concept, and in order to use a external third party I did the next and it is working, but probably is not a Polymer best practice.
Dom module with 3rd party css (third-party-styles.html)
<dom-module id="third-party-styles">
<link rel="stylesheet" href="../bower_components/thirdParty/external.css">
</dom-module>
I created a container (elements.html) where import all needed html modules, and there I registered the third party style module and my module
<link rel="import" href="third-party-styles.html">
<link rel="import" href="my-module.html">
And I added the elements.html in the head of my index.html
<head>
...
<link rel="import" href="elements.html">
<head>
<body>
<my-module></my-module>
</body>
In my Polymer Element (my-module.html)
<link rel="import" href="third-party-styles.html">
<dom-module id="my-module">
<style include="third-party-styles"></style>
<template>
<p class=".thirdPartyClass">Content with third party css rule</p>
</template>
</dom-module>
any feedback?
I'm trying to get to grips with Polymer 1.0 after doing a little work with 0.5. I'm struggling with what should be a very simple styling problem. I just can't seem to apply a style to a custom element.
Here is my element definition, my-element.html:
<link rel="import" href="../core/polymer/polymer.html">
<dom-module id="my-element">
<template><h1>Hello World</h1></template>
</dom-module>
<script>
Polymer({
is: 'my-element',
});
</script>
And here is the main page using it, index.html:
<!doctype html>
<html>
<head>
<script src="../core/webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="my-element.html">
</head>
<body>
<my-element></my-element>
</body>
</html>
This works fine... but now suppose I want to put a style on the instance of my-element. I add this to index.html:
<style>
my-element {
margin-top: 50px;
}
</style>
Nothing happens, no margin is added. Stangely the Elements inspector in Chrome doesn't seem to "see" the custom element, it looks like it's floating outside the page and doesn't enclose the elements contained within. See screenshot:
I initially suspected a bug in Chrome but it's the same problem in Firefox.
Any help appreciated, many thanks.
Try putting the attribute is="custom-style" on your style tag.
<style is="custom-style">
...
</style>
Also, by default an element will be displayed inline, but you can change this by applying a display property in your element :host style.
<dom-module id="my-element">
<style>
:host {display: block;}
</style>
<template>
...
</template>
</dom-module>
because my-element is not a default DOM element, you should "enable" it, like those html5 shivs are doing it for older browser that dont understand the new html5 elements
This tutorial should help you
var XFoo = document.registerElement('my-element');
document.body.appendChild(new XFoo());
The first argument to document.registerElement() is the element's tag name. The name must contain a dash (-). So for example, , , and are all valid names, while and are not. This restriction allows the parser to distinguish custom elements from regular elements but also ensures forward compatibility when new tags are added to HTML.
The second argument is an (optional) object describing the element's prototype. This is the place to add custom functionality (e.g. public properties and methods) to your elements.
So it's not supported to have:
...
<body>
<link rel="stylesheet" type="text/css" href="theme.css">
...
but what's the consensus with being able to do:
...
<body>
<style>
#import '/custom.css';
</style>
...
style tags and link rel should be within the head tags but that does not mean it won`t work inside body or divs. its just not good practice
#import '/custom.css';
should be placed only inside css files
Yes, you can have an #import rule at the start of a style sheet even when the style sheet appears as the content of a style element.
However, neither style nor link elements are allowed within body, only within body, according to the formal rules of HTML. These rules are not enforced in practice; the elements work just as they do inside head. (Division into body and head is really just formal.)