Paper-dropdown-menu component seems to be working fine on the polymer website [ https://www.polymer-project.org/components/paper-dropdown-menu/demo.html ].
However, I downloaded polymer/web components 0.5.1 and the menu doesn't seem to render at all [on any browser].
[ http://idineth.com/garage-website/bower_components/paper-dropdown-menu/demo.html ]
Any idea why this is the case? Polymer website seems to be using the same branch if I'm not mistaken.
Try adding these imports.
<link rel="import" href="bower_components/web-animations-next/web-animations.html">
<link rel="import" href="bower_components/web-animations-js/web-animations.html">
Related
I have an HTML page with a script to auto-convert a Markdown file. The file is embedded between <zero-md></zero-md>, and does get converted successfully. Now the converted text has to be formatted by my custom stylesheet. As instructed by the script provider, I inserted a snippet that modifies the script's constructor to reference my CSS (to override the default theme). It fails to format the text. Here's my code:
<head>
<script type="module" src="https://cdn.jsdelivr.net/gh/zerodevx/zero-md#2/dist/zero-md.min.js"></script>
<script>
window.ZeroMdConfig = {
cssUrls: [
'style.css'
]
}
</script>
</head>
<body>
<zero-md src="content.md"></zero-md>
</body>
This is equivalent to:
<head>
<script type="module" src="https://cdn.jsdelivr.net/gh/zerodevx/zero-md#2/dist/zero-md.min.js"></script>
</head>
<body>
<zero-md src="content.md">
<template>
<link rel="stylesheet" href="style.css">
</template>
</zero-md>
</body>
Neither works for me.
The path to the css file is correct. Replacing <template><link rel="stylesheet" href="style.css"></template> with <template><style>...</style></template> (i.e. inserting the css code itself into <zero-md></zero-md>) does work, it does the formatting, but I want it to be an external file.
I'm previewing it with Visual Studio, opening the page in Chrome through a port. (Incidentally, when I open the page directly from the browser or drag-drop the HTML onto the browser instead of using VS's preview function, the conversion script fails, it doesn't display the text content of the Markdown file, for whatever reason.)
Any suggestion?
A bit late, but first things first - ZeroMdConfig should be defined before importing the module:
<head>
<script>
window.ZeroMdConfig = {
cssUrls: [
'style.css'
]
}
</script>
<script type="module" src=".../zero-md.min.js"></script>
</head>
You're right that the gist above is semantically equivalent to the one below:
<zero-md src="content.md">
<template>
<link rel="stylesheet" href="style.css">
</template>
</zero-md>
Second thing - if you're using an external stylesheet, that file must be hosted. All modern browsers won't allow a .html file to access the local filesystem for security reasons. So if you're dragging the the .html file into the browser window to open it, I'm quite certain it wouldn't work.
However, when you're previewing it from VSCode, internally VSCode actually launches a HTTP server that serves these files to you - this probably explains why your preview works.
Not sure how else I can help though - perhaps if you can explain your use-case in detail, I (or others) can give some suggestions.
I am writing a Server Side Rendered app with Svelte/Sapper and I am having trouble using Font Awesome fonts.
I am using the following to load the font:
<script>
import Icon from "svelte-awesome";
import { faTimes } from "#fortawesome/free-solid-svg-icons/faTimes";
</script>
<Icon data={faTimes} />
The error I am seeing is:
" is not a valid SSR component. You may need to review your build config to ensure that dependencies are compiled, rather than imported as pre-compiled modules"
Is there a solution to this?
I landed on this page looking for ways to import just the FontAwesome CSS into Svelte without any additional components or dependencies. Turns out that with Svelte this is just as simple as with plain HTML: Get the FontAwesome CSS (e.g. via package manager, CDN, or download) and add it to the HTML <head> section.
I like to install it via npm to maintain its version together with all other depencies:
npm install --save #fortawesome/fontawesome-free
After installing, just add the stylesheet (from the #fortawesome directory inside node_modules) to the <head> section of app.html.
<head>
...
<link href="./../node_modules/#fortawesome/fontawesome-free/css/all.min.css" rel="stylesheet">
...
</head>
Use FontAwesome icons in your Svelte components, e.g. <i class="fa-regular fa-lightbulb">
For svelete-aweome, the import should look as follows in Sapper:
import Icon from 'svelte-awesome/components/Icon';
There have been questions doing the rounds , making a lot of people try stubbornly force scoping an external css into a Polymer element..
by hook or crook
And then the heart break of an #import not working, or a link rel=stylsheet not scoped
So,
How do I as an author / consumer of a polymer element, scope foreign stylesheets?
What are some gotchas? is #import supported and shimmed?
Can I Scope external CSS Stylesheets to within a Polymer Custom Element
TL;DR :
use link rel=import and pass the url of your external stylesheet to the poly-style tool
Note Polymer still can not shim an #import , or stuff with external urls , that require a fetch before the shim
Also, <link rel=stylesheet... is not scoped , but can be used.It is also, not shimmed into your element.
Polymer up until 1.0 defined the use of <link> tags with attributes
rel = import
type = css
and whatever href as long as it obeyed CORS principles
Everything was all fancy and we all held hands and sang kumbaya
With Polymer 2.0 and actually even the later versions of polymer 1.0,
something called style-modules were introduced where, you encapsulate
all your handwritten styles inside of a template in a dom-module container
<dom-module id="my-style">
<template>
<style>
.class_1{
/*all class_1 styles*/
}
.class_2{
/*all class_1 styles*/
}
.class_3{
/*all class_1 styles*/
}
</style>
</template>
</dom-module>
And then you'd essentially import these handwritten styles into your custom element
<link rel=import href=my-style.html />
<dom-module id="my-app">
<template>
<style include=my-style>
</style>
</template>
</dom-module>
Oh Snap! Now, I'd have to copy over entire stylesheets first, then wrap them in a <dom-module>
and then import them over to my app! we retorted.
And then there were numerous queries about deduplication and all those sort of anxieties
So, the preferred or suggested solution rather, was to read and search through stylesheets and copy over only those classes deemed necessary.
Polymer Also has yet to rid itself with the deprecated
<link rel=import type=css... />
css shimmer .
basically, even with polymer 2.0, you can use the above, albeit, you now need to actually place it inside of your <dom-module>.
and polymer shims it.
Some gotchas :
you simply can not have the dreadful #import rules inside those stylesheets
#imports require polymer to fetch the resource async and hence can not guarantee a shim - hence no support.
Now on some browsers, you might see this lingering in the shadows of your dev console:
Resource interpreted as Document but transferred with MIME type text/css: "https://a.b.com/additional.css".
This doesn't necessarily mean the resource wasn't fetched, but hey if your web server has a no-sniff
or any content integrity header set, that'd mean, the browser can not interpret a css as an html.
now since <link rel=import... is meant for HTML Imports , that'd mean, the browser has to accept only html as a response content type.
Hence, style modules are the best way to go while importing and scoping css to your components.
How then would I import an external stylesheet.. say a font-awesome ?
well, polymer has the web tool residing at
this web based style module builder for polymer
Now this web tool , duly gives you the required content-type and access-control headers.
Since the response is text/html , no more warnings on the console either.
So, How do I build my style module?
simple, use link rel=import and pass the url of your external stylesheet to the poly-style tool
<link rel="import" href="https://poly-style.appspot.com?id=poly-fa-style-module&url=https://use.fontawesome.com/releases/v4.7.0/css/font-awesome-css.min.css">
<dom-module id="poly-fa">
<template id="poly-fa-styler" strip-whitespace>
Now, all you need to do is, do an <style include=poly-fa> within your apps. and you have a scoped font awesome.
Caution!
This will still not support #imports
Also, ::slotted DOM, can not be styled by style-modules via shared styles, except under some scenarios where, you import the stylesheet into a higher element in the hierarchy
Gulp
The above tool is ideal for authors, who may choose not to prefill required external styles for their components in their custom elements, and fetch external css when necessary
for people who might want to pre fill external styles into their components, I have heard of a gulp plugin here , although I am yet to use it.
I followed The Bower installation method to install the Polymer library as recommended on the Polymer Project website. Specifically, I ran these commands from the root of my project's live web folder. The OS is Amazon Linux:
bower init
bower install --save Polymer/polymer#^1.2.0
bower update
This generated the following files/folders:
/bower.json
/bower_components/*
/bower_components/polymer/*
/bower_components/webcomponentsjs/*
To test whether the libraries were successfully installed, I went ahead and grabbed one of the examples from the tutorial and tried it out. Only the first line of this code comes into question, but I'm including all of it to dispel concerns that the code here is at fault:
elements/proto-element.html
// THIS is the line that doesn't work. The file exists, it was
// installed in the correct location. However, the polymer.html file
// itself appears to be broken
<link rel="import" href="../bower_components/polymer/polymer.html">
// HOWEVER, if I change it to link the library in from the web, everything
// works perfectly. As in this example:
<!--<link rel="import" href="http://www.polymer-project.org/1.0/components/polymer/polymer.html">-->
<polymer-element name="proto-element">
<template>
<span>Hello World.</span>
</template>
<script>
Polymer({
ready: function() {
}
});
</script>
</polymer-element>
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="elements/proto-element.html">
</head>
<body>
<proto-element></proto-element>
</body>
</html>
I examined the polymer.html file in question. The file that bower installed is completely different from the one available on the web. I guess my question is - is the bower install of Polymer just broken? Why is Bower installing a version other than the active stable release? Am I missing something?
If you open the web version's code, it is clearly marked as version 0.5.5, even though it is being pulled from the /1.0/ pool.
The bower version has no version markers in the code so I'm not sure which one it is, though I have to assume it is the latest 1.2.x stable release because that was specified in the install command. I'll note that I did try it without specifying any version as well (supposed to just install the very latest then) but that still didn't work.
Conclusion
The libraries Bower installed were working files after all. The problem was that the examples I had pulled from the "Getting Started" tutorial on the Polymer-Project.org website were outdated. Be very careful to select v. 1.0 from the top right hand corner.
It's not going to work as you're using the old way of declaring elements (pre v0.8).
Here's how you declare new elements:
<dom-module id="my-element"> <!-- ID must be the same as that of the name of the element you declared. -->
<template> <!-- Styles used to be declared outside the template v0.8 to v1.0. At v1.1 it is now declared inside the template (the outside declaration still works, it's just slow and discouraged). -->
<style>
:host {
display: block;
}
</style>
<div>Hello {{name}}.</div>
</template>
</dom-module>
<script>
Polymer({
is: 'my-element', // you must declare the name of your element
properties: { // declare your element's properties here
name: {
type: String,
value: 'Neil'
}
}
});
</script>
Also, the official hub/CDN for the library is at http://polygit.org, not at the official website.
What would be the best way to concatenate core-elements and paper elements from Polymer? As one large file? two seperate ones (core & paper)? a smaller division (5+ or 10 + or 20+)?
Im trying to reduce the number of imports per web page for a web-app and cant decide how to go about organizing polymer web-component imports. Any advice? / best way to use Vulcanization?
The easiest way is to vulcanize everything together. Add core-elements + paper-elements in one import that your index.html use:
elements.html:
<link rel="import" href="core-elements.html">
<link rel="import" href="paper-elements.html">
Then:
vulcanize elements.html -o elements.vulcanize.html --csp --inline --strip
For Polymer 1.0, you'll need the latest version of vulcanize and the flags have changed a bit: https://github.com/Polymer/vulcanize/releases