Develop Reference

Angular ng-container equivalent in vue.js

In Angular there is a tag called ng-container used like so
<ng-container *ngIf="false">this wont be shown</ng-container>
now as per the angular docs
The Angular is a grouping element that doesn't interfere with styles or layout because Angular doesn't put it in the DOM.
Now this is really handy in angular since there are often times I would like to group a set of html elements without using a <div></div>
For example
<div class="flex-div">
<ng-container *ngIf="true">
<img src="cool-img" alt="awesome">
<h1>Cool Title</h1>
<p>Cool Text</p>
</ng-container>
<ng-container *ngIf="false">
<img src="not-so-cool-img" alt="awesome">
<h1>Not So Cool Title</h1>
<p>Not So Cool Text</p>
</ng-container>
</div>
here I have a div that has a position of flex on it and also rules about what the elements inside do..
Now If I wrapped the elements in a normal div it will break my flex styles but with the ng-container it contains my elements but is not rendered to them DOM
Is there an equivalent in Vue??

You could use conditional grouping on a template as mentioned in the docs here. The template will serve as an invisible wrapper.
<div class="flex-div">
<template v-if="true">
<img src="cool-img" alt="awesome">
<h1>Cool Title</h1>
<p>Cool Text</p>
</template>
<template v-if="false">
<img src="not-so-cool-img" alt="awesome">
<h1>Not So Cool Title</h1>
<p>Not So Cool Text</p>
</template>
</div>

Polymer content selection dom-repeat

I have the following polymer element.
<dom-module id="my-element">
<template is="dom-repeat" items="[[items]]">
<paper-item>
<span>[[item]]</span>
</paper-item>
</template>
</dom-module>
Expected to be used as
<my-element items="[[items]]">
</my-element>
This will repeat the hardcoded span. But is it possible for the host to supply the rendering component as well. So instead of span they can provide whats going to be repeated.
<my-element items="[[items]]">
<div>
<div>[[item.name]]</div>
<div>[[item.address]]</div>
</div>
</my-element>
Tried content selection doesn't seem to repeat the selected element.
<dom-module id="my-element">
<template is="dom-repeat" items="[[items]]">
<paper-item>
<content select="element"></content>
</paper-item>
</template>
</dom-module>
<my-element items="[[items]]">
<div class="element">
<div>[[item.name]]</div>
<div>[[item.address]]</div>
</div>
</my-element>
Appreciate any help or directions on this.

If multiple <content> elements with the same select value are added all elements are projected to the first element with a matching selector. You need to find a different strategy.

Vue.js fragment instance

I seriously don't know, why the fragments is the problem.
<template>
<div id="page">
</div>
<div class="some">
</div>
</template>
[Vue warn]: Attribute "id" is ignored on component "div"

You need to wrap the contents of your template in another div. When it comes to render it, it needs the single root element to replace
<template>
<div>
<div id="page">
</div>
<div class="some">
</div>
</div>
</template>

Vue v3 now supports multi-root templates. Your code should work out-of-the-box.
https://v3-migration.vuejs.org/new/fragments.html

Polymer 1.0 skip nodes with ExcludeLocalNames

I try to migrate from Polymer 0.5 to 1.0 and got the following question:
Does anybody know, how to ignore nodes inside a paper-menu? In 0.5 you could set the attribute excludedLocalNames to ignore some of them, but in 1.0 it seems to have changed.
In the IronSelectableBehavior, there is still the property excludedLocalNames, so i thought it must be still working. Has anybody a working example?
The following code was my first attemp to create a submenu with that feature, but the submenu is not ignored by the parent:
<paper-menu selected="{{route}}" attr-For-Selected="entry" excludedLocalNames="paper-menu">
<paper-icon-item entry="home">
<iron-icon icon="home" item-icon></iron-icon>
Übersicht
</paper-icon-item>
<paper-icon-item entry="page1">
<iron-icon icon="label" item-icon></iron-icon>
Page1
</paper-icon-item>
<template is="dom-if" if="{{computeEquals(route,'page1')}}">
<paper-menu class="submenu" selected="{{routePage1}}" attr-For-Selected="entry1">
<paper-icon-item entry1="basics">
<iron-icon icon="icons:assignment" item-icon></iron-icon>
Basics
</paper-icon-item>
<paper-icon-item entry1="tools">
<iron-icon icon="icons:apps" item-icon></iron-icon>
Tools
</paper-icon-item>
</paper-menu>
</template>
<paper-icon-item entry="page2">
<iron-icon icon="label" item-icon></iron-icon>
Page2
</paper-icon-item>
</paper-menu>
Because there is no more submenu-element in 1.0, I tried that way to put a menu inside of a menu. But if I click on a submenu-item, the parent-menu changes his focused item...
Has anybody an idea how to use the excludeLocalNames-attribute?
Edit
Here are links to the documentations:
IronSelectableBehavior
paper-menu

Don't use excludedLocalNames in 1.0. Instead, set the selectable property on the selector to the names of the nodes you would like to allow selection for. Basically, it's a whitelist instead of a blacklist (which is a lot more reliable, too).
For example:
<paper-menu selectable="paper-item,div">
<paper-item>You can select me!</paper-item>
<div class="menu-item">You can select me, too.</div>
<paper-icon-item icon="user">You can't select me.</paper-icon-item>
<header>I'm not selectable either.</header>
</paper-menu>

Binding Paper-Tabs to Core-Pages with Polymer

I'm building a site with Polymer that uses paper-tabs and core-pages. The problem I'm running into is that I can not seem to get the click event for the tabs to affect the pages being shown and all content remains hidden unless I specifically select which page I want shown.
So I really just want the tabs to behave the way tabs are supposed to behave.
Here is my code so far:
<body unresolved>
<paper-tabs selected="0" selectedindex="0" id="paper-tabs" >
<paper-tab id="paper-tab" active>ABOUT</paper-tab>
<paper-tab id="paper-tab1">PORTFOLIO</paper-tab>
<paper-tab id="paper-tab2">CONTACT</paper-tab>
</paper-tabs>
<core-pages selected="{{$.paper-tab.selected}} " selectedindex="0" notap id="core-pages">
<about-me id="paper-tab" active>
<h2 horizontal center-justified>Worldwide Jamie</h2>
<p>Jamie is a Chicago-based freelance front end web developer.</p>
<p>Clearly this website is <b>Under Development</b></p>
<p>Come back soon to see how great your site could be</p>
</about-me>
<portfolio-list id="portfolio">
<!--Insert slider?-->
</portfolio-list>
<contact-me id="contact">
</contact-me>
</core-pages>
</body>
</html>
Thanks in advance for any time and consideration.

As of Polymer 1.0+, this is what you'll want to be using.
<link rel="import" href="components/paper-tabs/paper-tabs.html">
<link rel="import" href="components/iron-pages/iron-pages.html">
<paper-tabs selected="0">
<paper-tab>Tab One</paper-tab>
<paper-tab>Tab Two</paper-tab>
</paper-tabs>
<iron-pages selected="0">
<div>Page One</div>
<div>Page Two</div>
</iron-pages>
<script>
var pages = document.querySelector('iron-pages');
var tabs = document.querySelector('paper-tabs');
tabs.addEventListener('iron-select', function() {
pages.selected = tabs.selected;
});
</script>

Simple. use this in your script.
var tabs = document.querySelector('paper-tabs');
var pages = document.querySelector('core-pages');
tabs.addEventListener('core-select',function(){
pages.selected = tabs.selected;
});

Demo - Codepen.
<polymer-element name="my-element">
<template>
<style>
/* some css */
</style>
<section layout vertical is="auto-binding">
<paper-tabs selected="{{ selected }}" selectedindex="0" horizontal center layout>
<paper-tab inline flex center-center horizontal layout active>First</paper-tab>
<paper-tab inline flex center-center horizontal layout>Second</paper-tab>
...
</paper-tabs>
<core-animated-pages selected="{{ selected }}" selectedindex="0" notap>
<section active one flex vertical layout>
<--some html-->
</section>
<section one flex horizontal layout>
<--some html-->
</section>
...
</core-animated-pages>
</section>
</template>
<script>
Polymer({
selected: 0
});
</script>
</polymer-element>
<my-element></my-element>

The binding on <core-pages> is not being evaluated because data binding is only set up for definitions inside of a <polymer-element> template.
Polymer has a special "auto-binding" template that is meant to be put in the main page and provide data-binding for top level elements.
More info: http://www.polymer-project.org/docs/polymer/databinding-advanced.html#bindingoutside

There's a typo in your core-pages 'selected' attribute expression: paper-tab instead of paper-tabs
There's a trailing space behind this expression
You cannot use paper-tabs as a property name. Rename the paper-tabs id to paperTabs (btw. is there a way to make Polymer print an error message in case of a malformed expression?)
As #dfreedm said, you cannot use data binding outside a polymer-element. Another option is: put your whole app into a polymer-element.

<template is="auto-binding">
...
<paper-tabs selected="{{selected}}" selectedIndex="0" id="paper-tabs" >
...
<core-pages selected="{{selected}}" notap id="core-pages">
...
</template>
and, to add to some other things mentioned in other answers — i think paper-tab element shouldn't have active attribute