I'm new to polymer and am trying to understand how to load it. I'm reading this
https://www.polymer-project.org/2.0/start/quick-tour
In their first simple example, they load a polyfill
<script src="https://polygit.org/components/webcomponentsjs/webcomponents-loader.js"></script>
which I understand the reason. But the next part, they load a html file, which appears to load the main polymer app.
They load it with a html import to here
https://polygit.org/components/polymer/polymer-element.html
Which this appears to load a bunch of html files which all have script tags in it.
Then finally to use polymer, you just make a class that extends Polymer.Element.
This seems really strange, to why they chose to import a ton of html files. Why did they not just stuff all that js into 1 javascript polymer library file, like jquery. Or is there a javascript file for polymer like that?
Thanks.
There isn't a Polymer js file.
As you noticed, Polymer is distributed as HTML files which are consumed with HTML Import links.
A single component would import polymer/polymer-element.html while an app which uses that element would import polymer/polymer.html. Both of them include all the JS code they require.
Why HTML and not JS files? Because HTML import spec prevents a given file to be loaded multiple times unlike the <script> tag.
you only need to import their script file and the declare the class which extends the Ploymer.Element.
and then use the custom tag.
Or you can use the CLI tool they provided to create a project directory
Related
In every web component tutorial I see people building their custom elements just putting HTML and CSS inside JS (as a string value to an object property). What makes me wonder: Is there a way to make web components without mixing layout, style and behavior like that?
Being more specific, is it possible to build a web component separating the code into three files (.html, .css and .js)? Or even making a single file, but having the code split into three tags (<template>, <style> and <script>)?
Possible duplicate: How to separate web components to individual files and load them?
Here the author of the accepted answer proposed creating a javascript file that uses fetch() to load the HTML source code for the component. Then inside the HTML file link the separate CSS file using <link rel="stylesheet">
Inside your main HTML file you can then import the script that you create in the first step to load the web component.
This is just a summary, i invite you to check it out by yourself :) Cheers
I am trying to add/import js file in my React project, in a functional component to be exact. I know that there are some answers for this question (sort of this question) out there on stackoverflow but I am not able to use any of the solution or may be I just didn't find correct one yet. What I am trying to do is that I have a js file which I want to keep in src folder and not public if possible. So the myAnimation.js file is in src/assets/js/ folder. Now how can I import and run this file in my React project's functional component?
Basically I want to add this animation in my app : https://codepen.io/jasperlachance/pen/QNMwBg
So there are three js file in the codepen which I want to download and save it in my project instead of using the CDN links that this codepen has. So what would be best approach to have the three js files downloaded in my project and run it on a specific component lets say MyComponent which I import on route MyRoute. Also, I am using TypeScript. So how can I import js files and make them run one after another once the component is loaded/mounted and it has mounted/created html elements?
Thank you for your time in advance.
I know react is for Single Page Application. I have already build a complete application. I have a particular 3rd party integration that requires javascript and css files. I cannot add those external scripts as it breaks my entire application by overriding css and js.
I need to have a separate admin.html file which can have its own css and javascript tags. I do not want any conflict with my react app which renders on index.html
I tried to eject create-react-app and add a new admin.html.
https://github.com/facebook/create-react-app/issues/1084#issuecomment-568550609
But it uses only one page(index.html). This will not help me because I need completely a separate html file which I can import any javascript or css freely without any conflict on my index.html
Currently the possibility I thought was to create a separate react application just to render to this admin.html. So that there won't be any conflicts between javascript and css. But I want to know if there is an alternate way that I can achieve it in create-react-app. If so, simple example would be greatly appreciated.
PS: I need to redirect from one of components in my application to this new view admin.html with some data
I got a bootstrap theme that consists of HTML, CSS and Javascript. Now, I want to implement it (or let's say make it functional) in Vue. I have my index.html file that contains the container and it works. Now, my theme does have an index.html file as well. I just thought I can copy the whole file into the Vue-index.html and add the div with the id "app" around the area that changes the content. But it does not work. Basically, Vue does not load any external css or js files even though I reference them correctly (with relative reference using the dot: ./assets/css/style.css). It works inside a .vue-file (i.e. component) but not inside the index.html. What do I do wrong?
Yep, beginner here.
When you put them inside your index.html they are not compiled.
You can read about it HERE
Your index.html is something called a target. Vue uses this file as a mounting point for the rest of the application, so it's kept relatively clean, most likely with just metadata and a DOM mounting point. It works by loading the index.html in the browser and then mounting your Vue application on top of it.
If you're trying to apply some styles to a Vue application/components, your best bet is to modify *.vue files inside the app source of your Vue project (typically, /your-project/src). They will contain snippets of relevant sections/components alongside their logic (JavaScript) and styles (CSS/Sass), provided your project uses Single-File Components format.
For future reference:
It's hard to offer a solution without knowing the structure of your project, what type of components you are using, or even having code samples to get an idea of how things are working inside.
We'd need more information to be able to help you more accurately, so maybe you could create a lightweight demo on an interactive platform like codesandbox.io?
I want to know if it's possible to load a script.js into a Typescript html template in angular2? If it's not possible, how can I do and what alternatives I have? In my project, I need to call a dropzone.js script into the template dropzone.component.html. It doesn't work when I load it from this file. So how can I do if I don't want to put the script into index.html?? Thank you.
You can reference this question here, I do not believe it is possible to put a script tag inside of an angular 2 template.
angular2: including thirdparty js scripts in component