After upgrading to Angular RC.3 and switching to Ivy in a project I get the following error:
Error: dialog is not a known element: 1. If dialog is an Angular component, then verify that it is part of this module. 2. To allow any element add NO_ERRORS_SCHEMA to the #NgModule.schemas of this component.
Indeed I have a markup like this using a <dialog>-element:
<dialog [attr.open]="open ? '' : null"></dialog>
Even though the browser coverage is not 100% dialog is still a valid HTML element.
Did they miss to support it? Is this a bug in Anglaur or Ivy? Can I only use the dialog-element, when I also use NO_ERRORS_SCHEMA in the components?*
* Which I actually don't want to activate.
As said in the Polymer-Summit 2017, web-components, in Polymer 3.0, won't be imported using HTML-imports but ES6-modules.
So I am looking for a way to change all my HTML-imports one by one into ES6-module's import without making unstable code.
For exemple:
Here's a little simple project.
Their are 3 files:
|-index.html
|-custom-element.html
|-MyModule.html
The index.html imports the custom-elementcomponent and instantiate one in the DOM.
The custom-element.html imports MyModule.html, and use its function square(number).
All imports are made using HTML-imports.
I am trying to figure out how to make just MyModule an ES6-module and then import it in the custom-element.html file without breaking the app.
Change the script tag's type into <script type="module">.
Import the ES6 module from inside the script module.
Here's the plunker with the full solution.
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 am trying to optimise the loading of Polymer Elements in my Polymer based web app. In particular I am concentrating my effort around the initial start up screens. Users will have to log on if they don't have a valid jwt token held in a cookie.
index.html loads an application element <pas-app> which in turn loads an session manager (<pas-eession>). Since the normal startup will be when the user is already logged on the element that handles input of user name and password (<pas-logon>) is hidden behind a <template is="dom-if"> element inside of <pas-session>and I have added the async flag to its html import line in that element as well - thus :
<link rel="import" href="pas-logon.html" async>
However, in chrome (I don't experience this in firefox, where html imports are polyfilled) this async seems to flow over embedded <script> element inside the custom element. In particular I get a type error because the script to cause it to be regestered as a custom element thinks Polymer is not a function.
I suspect I am using the wrong kind of async flag - is there a way to specify that the html import should not block the current element, but should block the scripts inside itself when loaded.
I think I had the same problem today and found this question when searching for a solution. When using importHref async I get errors like [paper-radio-button::_flattenBehaviorsList]: behavior is null, check for missing or 404 import and dependencies are not loaded in the right order. When I change to async = false the error messages are gone.
It seems that this is a known bug of Polymer or probably Chrome https://github.com/Polymer/polymer/issues/2522
I'm using React for my components, and in order to package up the styles with my components, I'm requiring them in as per the documented webpack method:
require('./style.css');
But when I try to render on the server, node-jsx throws an error when it attempts to transform the css. Is there another way of transforming the jsx which won't break on css? I'd rather not break the styles out into their own pipeline as that would defeat the advantage of webpack packaging components up nicely.
This can be solved setting webpack's "target" configuration to "node".
This simple example app should explain it clearly.
https://github.com/webpack/react-webpack-server-side-example/blob/master/webpack.config.js
You could use require.extensions like this:
require.extensions['.css'] = function() {return null}