I'm using the web component implementation in knockout.js in a project of mine in order to abstract UI components that I reuse throughout my app. One of those components is an About popup which contains a bunch of info on my app.
Abstracting this About component is great for development, as I can reuse it between different pages and rely on front-end, not back-end, methodology for including it. The downside however, is SEO. I want my app's description to be seen by all the big search engines, so I need to precompile certain web components in my HTML to be sure that all robots see it. I'm thinking the ideal scenario would be to do this in my build step (currently using Grunt to build btw) - ie. inline the content of my <about-app> component in my index.html.
Has anyone written a tool to accomplish this? Or should I just use a different approach for these kinds of scenarios where the web component contains a lot of (crucial) content?
Since I was so clear on exactly what I was looking for here, and I couldn't find it, I actually went ahead and wrote my first node module with an accompanying Grunt task - grunt-inline-web-components.
The config lets you specify jQuery style selectors and paths to template files that should be inlined in any matching nodes. It's a basic concept, but powerful enough. For example, if I give the components I want to "pre-compile" a class of critical, then I can inline them in just a few select places. Here's some code to illustrate:
grunt.initConfig({
inline_web_components: {
options: {
components: {
"about-app": "components/about-app.html",
"my-component:first": "components/my-component.html",
"flashy-button.critical": "components/flashy-button.html"
}
},
dist: {
dist: {
files: [
expand: true,
cwd: "app",
src: "{,*/}*.html",
dest: "dist"
]
}
},
},
});