fix(core): don't wrap <tr>
and <col>
elements into a required parent (#29219)
BREAKING CHANGE: Certain elements (like `<tr>` or `<col>`) require parent elements to be of a certain type by the HTML specification (ex. <tr> can only be inside <tbody> / <thead>). Before this change Angular template parser was auto-correcting "invalid" HTML using the following rules: - `<tr>` would be wrapped in `<tbody>` if not inside `<tbody>`, `<tfoot>` or `<thead>`; - `<col>` would be wrapped in `<colgroup>` if not inside `<colgroup>`. This meachanism of automatic wrapping / auto-correcting was problematic for several reasons: - it is non-obvious and arbitrary (ex. there are more HTML elements that has rules for parent type); - it is incorrect for cases where `<tr>` / `<col>` are at the root of a component's content, ex.: ```html <projecting-tr-inside-tbody> <tr>...</tr> </projecting-tr-inside-tbody> ``` In the above example the `<projecting-tr-inside-tbody>` component culd be "surprised" to see additional `<tbody>` elements inserted by Angular HTML parser. PR Close #29219
This commit is contained in:

committed by
Matias Niemelä

parent
019e65abfb
commit
f2dc32e5c7
@ -401,6 +401,33 @@ describe('query logic', () => {
|
||||
|
||||
});
|
||||
|
||||
describe('descendants', () => {
|
||||
|
||||
it('should match directives on elements that used to be wrapped by a required parent in HTML parser',
|
||||
() => {
|
||||
|
||||
@Directive({selector: '[myDef]'})
|
||||
class MyDef {
|
||||
}
|
||||
|
||||
@Component({selector: 'my-container', template: ``})
|
||||
class MyContainer {
|
||||
@ContentChildren(MyDef) myDefs !: QueryList<MyDef>;
|
||||
}
|
||||
@Component(
|
||||
{selector: 'test-cmpt', template: `<my-container><tr myDef></tr></my-container>`})
|
||||
class TestCmpt {
|
||||
}
|
||||
|
||||
TestBed.configureTestingModule({declarations: [TestCmpt, MyContainer, MyDef]});
|
||||
const fixture = TestBed.createComponent(TestCmpt);
|
||||
const cmptWithQuery = fixture.debugElement.children[0].injector.get(MyContainer);
|
||||
|
||||
fixture.detectChanges();
|
||||
expect(cmptWithQuery.myDefs.length).toBe(1);
|
||||
});
|
||||
});
|
||||
|
||||
describe('observable interface', () => {
|
||||
|
||||
it('should allow observing changes to query list', () => {
|
||||
|
Reference in New Issue
Block a user